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

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

इमेज कैप्चर एक ऐसा एपीआई है जिसका इस्तेमाल करके, स्टिल इमेज कैप्चर की जा सकती हैं और कैमरे के हार्डवेयर की सेटिंग कॉन्फ़िगर की जा सकती हैं. यह एपीआई, Android और डेस्कटॉप पर Chrome 59 में उपलब्ध है. हमने ImageCapture polyfill लाइब्रेरी भी पब्लिश की है.

इस एपीआई की मदद से, कैमरे की सुविधाओं को कंट्रोल किया जा सकता है. जैसे, ज़ूम, रोशनी, कंट्रास्ट, आईएसओ, और व्हाइट बैलेंस. सबसे अच्छी बात यह है कि इमेज कैप्चर की मदद से, डिवाइस के किसी भी कैमरे या वेबकैम का पूरा रिज़ॉल्यूशन ऐक्सेस किया जा सकता है. वेब पर फ़ोटो लेने की पिछली तकनीकों में, वीडियो स्नैपशॉट का इस्तेमाल किया जाता था. ये स्नैपशॉट, स्टिल इमेज के मुकाबले कम रिज़ॉल्यूशन वाले होते हैं.

ImageCapture ऑब्जेक्ट को सोर्स के तौर पर MediaStreamTrack के साथ बनाया जाता है. इसके बाद, एपीआई में कैप्चर करने के दो तरीके takePhoto() और grabFrame() होते हैं. साथ ही, कैमरे की सुविधाओं और सेटिंग को वापस पाने और उन सेटिंग को बदलने के तरीके भी होते हैं.

निर्माण

Image Capture API को 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));

कॉन्फ़िगर करना

"लाइव" कैमरे की सेटिंग को झलक के MediaStreamTrackapplyConstraints()सीमाओं के ज़रिए कॉन्फ़िगर किया जा सकता है. उदाहरण के लिए:

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() पाबंदियां सेट करने का तरीका बताया गया है.

और कुछ?

  • आकार का पता लगाने वाला एपीआई, इमेज कैप्चर के साथ बेहतर तरीके से काम करता है: FaceDetector या BarcodeDetector में ImageBitmap को फ़ीड करने के लिए, grabFrame() को बार-बार कॉल किया जा सकता है. एपीआई के बारे में ज़्यादा जानने के लिए, पॉल किनलन की ब्लॉग पोस्ट पढ़ें.

  • कैमरा फ़्लैश (डिवाइस की लाइट) को ऐक्सेस करने के लिए, PhotoCapabilities में जाकर FillLightMode पर टैप करें. हालांकि, टार्च मोड (फ़्लैश हमेशा चालू रहता है) को ऐक्सेस करने के लिए, MediaTrackCapabilities पर जाएं.

डेमो और कोड सैंपल

सहायता

  • Android और डेस्कटॉप पर Chrome 59.
  • Android और डेस्कटॉप पर Chrome Canary का 59 से पहले का वर्शन, जिसमें प्रयोग के तौर पर उपलब्ध वेब प्लैटफ़ॉर्म की सुविधाएं चालू हों.

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