इमेज कैप्चर एक एपीआई है. इसकी मदद से, स्टिल इमेज को कैप्चर किया जा सकता है और कैमरे के हार्डवेयर की सेटिंग कॉन्फ़िगर की जा सकती है. यह एपीआई, Android और डेस्कटॉप पर Chrome 59 में उपलब्ध है. हमने ImageCapture पॉलीफ़िल लाइब्रेरी भी पब्लिश की है.
इस एपीआई से कैमरे की सुविधाओं को कंट्रोल किया जा सकता है, जैसे कि ज़ूम, चमक, कंट्रास्ट, ISO, और व्हाइट बैलेंस. सबसे अच्छी बात यह है कि इमेज कैप्चर करने की सुविधा से, आपको किसी भी उपलब्ध डिवाइस के कैमरे या वेबकैम की फ़ुल रिज़ॉल्यूशन क्षमताओं को ऐक्सेस करने की सुविधा मिलती है. वेब पर फ़ोटो लेने की पिछली तकनीकों में वीडियो के स्नैपशॉट इस्तेमाल किए गए थे. इनका रिज़ॉल्यूशन, इमेज के लिए उपलब्ध रिज़ॉल्यूशन से कम होता है.
ImageCapture ऑब्जेक्ट को सोर्स के तौर पर, MediaStreamTrack का इस्तेमाल करके बनाया गया है. इसके बाद, एपीआई में कैप्चर करने के दो तरीके takePhoto() और grabFrame() होते हैं. साथ ही, कैमरे की क्षमताओं और सेटिंग को वापस पाने और उन सेटिंग में बदलाव करने के तरीके उपलब्ध होते हैं.
निर्माण गतिविधियां
इमेज कैप्चर एपीआई को getUserMedia() से मिले MediaStreamTrack से कैमरे का ऐक्सेस मिलता है:
navigator.mediaDevices.getUserMedia({video: true})
.then(gotMedia)
.catch(error => console.error('getUserMedia() error:', error));
function gotMedia(mediaStream) {
const mediaStreamTrack = mediaStream.getVideoTracks()[0];
const imageCapture = new ImageCapture(mediaStreamTrack);
console.log(imageCapture);
}
DevTools कंसोल से यह कोड आज़माकर देखें.
कैप्चर करें
कैप्चर करने के दो तरीके हैं: फ़ुल फ़्रेम और क्विक स्नैपशॉट. takePhoto()
एक Blob, एक फ़ोटोग्राफ़िक एक्सपोज़र का नतीजा दिखाता है,
जिसे ब्राउज़र से स्टोर किया जा सकता है, डाउनलोड किया जा सकता है या <img> एलिमेंट में दिखाया जा सकता है. यह तरीका सबसे ज़्यादा उपलब्ध फ़ोटोग्राफ़िक कैमरा रिज़ॉल्यूशन का इस्तेमाल करता है.
उदाहरण के लिए:
const img = document.querySelector('img');
// ...
imageCapture.takePhoto()
.then(blob => {
img.src = URL.createObjectURL(blob);
img.onload = () => { URL.revokeObjectURL(this.src); }
})
.catch(error => console.error('takePhoto() error:', error));
grabFrame(), ImageBitmap ऑब्जेक्ट दिखाता है, जो लाइव वीडियो का स्नैपशॉट होता है. यह (उदाहरण के लिए) <canvas> पर बनाया जा सकता है. इसके बाद, कलर वैल्यू को चुनने के लिए, इसे पोस्ट-प्रोसेस किया जा सकता है. ध्यान दें कि ImageBitmap में सिर्फ़ वीडियो के सोर्स का रिज़ॉल्यूशन होगा. आम तौर पर, यह सोर्स कैमरे की स्टिल इमेज क्वालिटी से कम होता है. उदाहरण के लिए:
const canvas = document.querySelector('canvas');
// ...
imageCapture.grabFrame()
.then(imageBitmap => {
canvas.width = imageBitmap.width;
canvas.height = imageBitmap.height;
canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
})
.catch(error => console.error('grabFrame() error:', error));
सुविधाएं और सेटिंग
कैप्चर सेटिंग में कई तरीकों से बदलाव किया जा सकता है. यह सब इस पर निर्भर करता है कि बदलाव MediaStreamTrack में दिखेंगे या takePhoto() के बाद ही दिखेंगे. उदाहरण के लिए, zoom लेवल में बदलाव, MediaStreamTrack में तुरंत लागू हो जाता है, जबकि रेड आई रिडक्शन
को सेट करने पर ही लागू किया जाता है. यह सिर्फ़ तब लागू होता है, जब फ़ोटो ली जा रही हो.
"लाइव" कैमरे की क्षमताओं और सेटिंग में झलक की मदद से बदलाव किया गया है
MediaStreamTrack: MediaStreamTrack.getCapabilities() एक
MediaTrackCapabilities
शब्दकोश दिखाता है, जिसमें ठोस रूप से काम करने वाली क्षमताओं और रेंज या
वैल्यू शामिल हैं. उदाहरण के लिए, ज़ूम की रेंज या अनुमति वाले व्हाइट बैलेंस मोड.
इसी तरह, MediaStreamTrack.getSettings(), कंक्रीट मौजूदा सेटिंग के साथ
MediaTrackSettings
दिखाता है. ज़ूम, ब्राइटनेस, और टॉर्च मोड इस कैटगरी के हैं, उदाहरण के लिए:
var zoomSlider = document.querySelector('input[type=range]');
// ...
const capabilities = mediaStreamTrack.getCapabilities();
const settings = mediaStreamTrack.getSettings();
if (capabilities.zoom) {
zoomSlider.min = capabilities.zoom.min;
zoomSlider.max = capabilities.zoom.max;
zoomSlider.step = capabilities.zoom.step;
zoomSlider.value = settings.zoom;
}
"लाइव नहीं है" कैमरे की क्षमताओं और सेटिंग में, ImageCapture ऑब्जेक्ट के ज़रिए बदलाव किया गया है: ImageCapture.getPhotoCapabilities() एक
PhotoCapabilities ऑब्जेक्ट दिखाता है. यह ऑब्जेक्ट, कैमरे की ऐसी सुविधाओं को ऐक्सेस करता है जो "लाइव नहीं हैं".
ठीक इसी तरह, Chrome 61 से ImageCapture.getPhotoSettings()
एक
PhotoSettings
ऑब्जेक्ट दिखाता है, जिसमें कंक्रीट मौजूदा सेटिंग होती हैं. फ़ोटो रिज़ॉल्यूशन, रेड आई रिडक्शन
और फ़्लैश मोड (टॉर्च को छोड़कर), इस सेक्शन से जुड़े हैं, उदाहरण के लिए:
var widthSlider = document.querySelector('input[type=range]');
// ...
imageCapture.getPhotoCapabilities()
.then(function(photoCapabilities) {
widthSlider.min = photoCapabilities.imageWidth.min;
widthSlider.max = photoCapabilities.imageWidth.max;
widthSlider.step = photoCapabilities.imageWidth.step;
return imageCapture.getPhotoSettings();
})
.then(function(photoSettings) {
widthSlider.value = photoSettings.imageWidth;
})
.catch(error => console.error('Error getting camera capabilities and settings:', error));
कॉन्फ़िगर करना
"लाइव" कैमरे की सेटिंग को झलक
MediaStreamTrack की applyConstraints()
सीमाओं
के ज़रिए कॉन्फ़िगर किया जा सकता है. उदाहरण के लिए:
var zoomSlider = document.querySelector('input[type=range]');
mediaStreamTrack.applyConstraints({ advanced: [{ zoom: zoomSlider.value }]})
.catch(error => console.error('Uh, oh, applyConstraints() error:', error));
"लाइव नहीं है" कैमरे की सेटिंग को takePhoto() के वैकल्पिक
PhotoSettings
शब्दकोश के हिसाब से कॉन्फ़िगर किया जाता है. उदाहरण के लिए:
var widthSlider = document.querySelector('input[type=range]');
imageCapture.takePhoto({ imageWidth : widthSlider.value })
.then(blob => {
img.src = URL.createObjectURL(blob);
img.onload = () => { URL.revokeObjectURL(this.src); }
})
.catch(error => console.error('Uh, oh, takePhoto() error:', error));
कैमरे की सुविधाएं
ऊपर दिए गए कोड को चलाने पर, आपको grabFrame() और takePhoto() नतीजों के बीच डाइमेंशन में अंतर दिखेगा.
takePhoto() तरीका कैमरे के ज़्यादा से ज़्यादा रिज़ॉल्यूशन का ऐक्सेस देता है.
grabFrame(), रेंडर करने की प्रोसेस में MediaStreamTrack में अगले उपलब्ध VideoFrame को लेता है, जबकि takePhoto() MediaStream में रुकावट डालता है, कैमरे को फिर से कॉन्फ़िगर करता है, फ़ोटो लेता है (आम तौर पर, कंप्रेस किए गए फ़ॉर्मैट में होता है, इसलिए Blob) और फिर MediaStreamTrack को फिर से शुरू करता है. कम शब्दों में कहें, तो इसका मतलब यह है कि takePhoto(), कैमरे की स्टिल इमेज रिज़ॉल्यूशन क्षमताओं को ऐक्सेस देता है. पहले, किसी वीडियो को सोर्स के तौर पर इस्तेमाल करके, canvas एलिमेंट पर drawImage() को कॉल करके ही 'फ़ोटो ली जा सकती थी'. यहां दिए गए उदाहरण के मुताबिक, ऐसा किया जा सकता है.
ज़्यादा जानकारी के लिए, README.md के सेक्शन पर जाएं.
इस डेमो में, <canvas> डाइमेंशन को वीडियो स्ट्रीम के रिज़ॉल्यूशन पर सेट किया गया है. वहीं, <img> का सामान्य साइज़, कैमरे का ज़्यादा से ज़्यादा स्टिल इमेज रिज़ॉल्यूशन है. सीएसएस का इस्तेमाल, दोनों का डिसप्ले साइज़
सेट करने में किया जाता है.
स्टिल इमेज के लिए उपलब्ध कैमरा रिज़ॉल्यूशन की पूरी रेंज, PhotoCapabilities.imageHeight और imageWidth के लिए MediaSettingsRange वैल्यू का इस्तेमाल करके देखी और सेट की जा सकती है. ध्यान दें कि getUserMedia() के लिए, कम से कम और ज़्यादा से ज़्यादा चौड़ाई और ऊंचाई की सीमाएं, वीडियो के लिए हैं. जैसा कि बताया गया है, स्टिल इमेज के लिए कैमरे की क्षमताओं से यह अलग हो सकती है. दूसरे शब्दों में, हो सकता है कि getUserMedia() से कैनवस में सेव करते समय, आप अपने डिवाइस का फ़ुल रिज़ॉल्यूशन वाली सुविधाओं को ऐक्सेस न कर पाएं. WebRTC के रिज़ॉल्यूशन कंस्ट्रेंट डेमो में, रिज़ॉल्यूशन के लिए getUserMedia() कंस्ट्रेंट को सेट करने का तरीका बताया गया है.
और कुछ?
शेप डिटेक्शन एपीआई इमेज कैप्चर करने की सुविधा के साथ अच्छी तरह से काम करता है:
ImageBitmapकोFaceDetectorयाBarcodeDetectorपर फ़ीड करने के लिए,grabFrame()को बार-बार कॉल किया जा सकता है. पॉल किनलन की ब्लॉग पोस्ट से, एपीआई के बारे में ज़्यादा जानकारी पाएं.कैमरे के फ़्लैश (डिवाइस की लाइट) को
FillLightModeसेPhotoCapabilitiesमें ऐक्सेस किया जा सकता है. हालांकि, टॉर्च मोड (हमेशा चालू रहने वाला मोड) कोMediaTrackCapabilitiesमें देखा जा सकता है.
डेमो और कोड सैंपल
सपोर्ट करें
- Android और डेस्कटॉप पर Chrome 59.
- Android और डेस्कटॉप पर Chrome कैनरी का वर्शन 59 से पुराना है. साथ ही, प्रयोग के तौर पर वेब प्लैटफ़ॉर्म की सुविधाएं चालू हैं.