फ़ोटो लें और कैमरे की सेटिंग कंट्रोल करें

Miguel Casas-Sanchez
X GitHub
Sam Dutton
François Beaufort
François Beaufort
GitHub

इमेज कैप्चर एक एपीआई है, जिसकी मदद से इमेज कैप्चर की जा सकती हैं और कैमरा हार्डवेयर को कॉन्फ़िगर किया जा सकता है सेटिंग. यह एपीआई, 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 कैनरी प्रयोग के तौर पर वेब प्लैटफ़ॉर्म की सुविधाएं चालू की गई हैं.

ज़्यादा जानें