इमेज कैप्चर एक एपीआई है, जिसकी मदद से इमेज कैप्चर की जा सकती हैं और कैमरा हार्डवेयर को कॉन्फ़िगर किया जा सकता है सेटिंग. यह एपीआई, Android और डेस्कटॉप पर Chrome 59 में उपलब्ध है. हमने भी Imageकैप्चर पॉलीफ़िल लाइब्रेरी पब्लिश की गई हो.
एपीआई, कैमरा सुविधाओं को कंट्रोल करने की सुविधा देता है. जैसे, ज़ूम, स्क्रीन की रोशनी, कंट्रास्ट, ISO, और व्हाइट बैलेंस. सबसे अच्छी बात यह है कि इमेज कैप्चर से आपको किसी भी उपलब्ध डिवाइस कैमरे या वेबकैम की फ़ुल रिज़ॉल्यूशन क्षमताओं को ऐक्सेस कर सकते हैं. वेब पर फ़ोटो खींचने की पिछली तकनीकों में, वीडियो के स्नैपशॉट का इस्तेमाल किया गया है, जिनका रिज़ॉल्यूशन, स्टिल इमेज के लिए उपलब्ध रिज़ॉल्यूशन से कम है.
ImageCapture
ऑब्जेक्ट को सोर्स के तौर पर MediaStreamTrack
की मदद से बनाया गया है. कॉन्टेंट बनाने
इसके बाद, एपीआई में कैप्चर करने के दो तरीके takePhoto()
और grabFrame()
होते हैं. साथ ही,
कैमरे की क्षमताओं और सेटिंग को वापस ला सकता है, और उन्हें बदल सकता है
सेटिंग.
निर्माण
इमेज कैप्चर एपीआई को MediaStreamTrack
से मिले कैमरे का ऐक्सेस मिलता है
getUserMedia()
से:
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
वह ऑब्जेक्ट जो "नॉन-लाइव" का ऐक्सेस देता है उपलब्ध कैमरा क्षमताओं की जानकारी.
इसी तरह, ImageCapture.getPhotoSettings()
के Chrome 61 और इसके बाद के वर्शन में
नतीजे के तौर पर
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()
पूरी इमेज रिज़ॉल्यूशन का ऐक्सेस देता है
कैमरे की ज़बरदस्त सुविधाएं इस्तेमाल कर सकते हैं. पहले, केवल 'फ़ोटो क्लिक' करना संभव था लेखक
drawImage()
को canvas
एलिमेंट पर कॉल किया जा रहा है. साथ ही, सोर्स के तौर पर वीडियो का इस्तेमाल किया जा रहा है (जैसा कि
उदाहरण के लिए, यहां जाएं).
README.md सेक्शन में, ज़्यादा जानकारी मिल सकती है.
इस डेमो में, <canvas>
डाइमेंशन को वीडियो के रिज़ॉल्यूशन पर सेट किया गया है
स्ट्रीम नहीं करता है, जबकि <img>
का प्राकृतिक आकार अधिकतम स्थिर-इमेज है
उसका रिज़ॉल्यूशन भी सही कर दिया जाता है. हालांकि, सीएसएस का इस्तेमाल डिसप्ले सेट करने के लिए किया जाता है
दोनों का साइज़.
स्टिल इमेज के लिए उपलब्ध कैमरा रिज़ॉल्यूशन की पूरी रेंज को लिया और सेट किया जा सकता है
PhotoCapabilities.imageHeight
और इसके लिए MediaSettingsRange
वैल्यू का इस्तेमाल करके
imageWidth
. ध्यान दें कि इसके लिए न्यूनतम और अधिकतम चौड़ाई और ऊंचाई प्रतिबंध
getUserMedia()
, वीडियो के लिए हैं. जिन पर चर्चा की जा चुकी है, हो सकता है कि ये
स्टिल इमेज के लिए कैमरा क्षमताएं. दूसरे शब्दों में कहें, तो हो सकता है कि आपको
से सेव करते समय अपने डिवाइस की फ़ुल रिज़ॉल्यूशन क्षमताओं को ऐक्सेस करें
कैनवस में getUserMedia()
. WebRTC रिज़ॉल्यूशन कंस्ट्रेंट डेमो
दिखाता है कि रिज़ॉल्यूशन के लिए getUserMedia()
कंस्ट्रेंट को कैसे सेट किया जाता है.
और कुछ?
शेप डिटेक्शन एपीआई इमेज कैप्चर के साथ ठीक से काम करता है: फ़ीड करने के लिए
grabFrame()
को बार-बार कॉल किया जा सकता हैFaceDetector
याBarcodeDetector
मेंImageBitmap
. इस बारे में ज़्यादा जानें पॉल किनलैन के ब्लॉग पोस्ट से एपीआई.कैमरे का फ़्लैश (डिवाइस की लाइट) का इस्तेमाल इनके ज़रिए किया जा सकता है:
FillLightMode
इंचPhotoCapabilities
है, लेकिन टॉर्च मोड (लगातार चालू रहने वाला फ़्लैश चालू) भी इसेMediaTrackCapabilities
.
डेमो और कोड सैंपल
सहायता
- Android और डेस्कटॉप पर Chrome 59.
- Android और डेस्कटॉप पर, 59 से पहले के वर्शन में, Chrome कैनरी प्रयोग के तौर पर वेब प्लैटफ़ॉर्म की सुविधाएं चालू की गई हैं.