इमेज कैप्चर करने की सुविधा, स्टिल इमेज लेने और कैमरा हार्डवेयर सेटिंग को कॉन्फ़िगर करने का एक एपीआई है. यह एपीआई, Android और डेस्कटॉप पर Chrome 59 में उपलब्ध है. हमने एक Image Capture polyfill Library पब्लिश की है.
यह एपीआई, कैमरे की सुविधाओं पर कंट्रोल करता है. जैसे, ज़ूम, ब्राइटनेस, कंट्रास्ट, आईएसओ, और व्हाइट बैलेंस. सबसे अच्छी बात यह है कि इमेज कैप्चर से आपको किसी भी उपलब्ध डिवाइस के कैमरे या वेबकैम की फ़ुल रिज़ॉल्यूशन क्षमताओं को ऐक्सेस करने की सुविधा मिलती है. वेब पर फ़ोटो लेने की पिछली तकनीकों में, वीडियो के स्नैपशॉट का इस्तेमाल होता था, जिनका रिज़ॉल्यूशन, स्टिल इमेज के लिए उपलब्ध रिज़ॉल्यूशन से कम होता है.
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 और डेस्कटॉप पर 59 से पहले के वर्शन वाले Chrome कैनरी में प्रयोग के तौर पर उपलब्ध वेब प्लैटफ़ॉर्म सुविधाएं चालू हैं.