अपने वेब ऐप्लिकेशन से कैमरे, माइक्रोफ़ोन, और स्पीकर चुनें

Sam Dutton

आधुनिक ब्राउज़र में, इनपुट और आउटपुट डिवाइसों को चुना जा सकता है. इनमें कैमरे, माइक्रोफ़ोन, और स्पीकर शामिल हैं.

उदाहरण के लिए:

  • फ़ोन पर, सामने या पीछे वाला कैमरा चुनें.
  • लैपटॉप पर, इंटरनल स्पीकर या ब्लूटूथ से कनेक्ट किया गया स्पीकर चुनें.
  • वीडियो चैट के लिए, डिवाइस में पहले से मौजूद या बाहरी माइक्रोफ़ोन या कैमरा चुनें.

यह सभी सुविधा, MediaDevices ऑब्जेक्ट से एक्सपोज़ की जाती है, जिसे navigator.mediaDevices से दिखाया जाता है.

MediaDevices के दो तरीके हैं. दोनों को डेस्कटॉप और Android पर Chrome 47 में लागू किया गया है: enumerateDevices() और getUserMedia().

ऑडियो आउटपुट डिवाइस चुनना.

enumerateDevices()

यह एक प्रॉमिस दिखाता है, जो उपलब्ध डिवाइसों के लिए MediaDeviceInfo ऑब्जेक्ट के कलेक्शन का ऐक्सेस देता है.

यह तरीका MediaStreamTrack.getSources() से मिलता-जुलता है. हालांकि, इस तरीके के उलट (जिसे सिर्फ़ Chrome में लागू किया गया था) यह स्टैंडर्ड के मुताबिक है और इसमें ऑडियो आउटपुट डिवाइस भी शामिल हैं. यहां दिए गए डेमो की मदद से, इसे आज़माया जा सकता है.

यहां किसी डेमो से लिया गया, आसानी से समझ आने वाला कोड दिया गया है:

navigator.mediaDevices.enumerateDevices()
    .then(gotDevices)
    .catch(errorCallback);
...
function gotDevices(deviceInfos) {

    ...

    for (var i = 0; i !== deviceInfos.length; ++i) {
    var deviceInfo = deviceInfos[i];
    var option = document.createElement('option');
    option.value = deviceInfo.deviceId;
    if (deviceInfo.kind === 'audioinput') {
        option.text = deviceInfo.label ||
        'Microphone ' + (audioInputSelect.length + 1);
        audioInputSelect.appendChild(option);
    } else if (deviceInfo.kind === 'audiooutput') {
        option.text = deviceInfo.label || 'Speaker ' +
        (audioOutputSelect.length + 1);
        audioOutputSelect.appendChild(option);
    } else if (deviceInfo.kind === 'videoinput') {
        option.text = deviceInfo.label || 'Camera ' +
        (videoSelect.length + 1);
        videoSelect.appendChild(option);
    }

    ...

}

enumerateDevices() का इस्तेमाल करके, उपलब्ध डिवाइसों के आईडी हासिल करने के बाद, किसी वीडियो या ऑडियो एलिमेंट के लिए ऑडियो आउटपुट डेस्टिनेशन बदलने के लिए, setSinkId() (ऑडियो आउटपुट डिवाइसों के लिए एपीआई में बताया गया) का इस्तेमाल किया जा सकता है:

element.setSinkId(sinkId)
    .then(function() {
    console.log('Audio output device attached: ' + sinkId);
    })
    .catch(function(error) {
    // ...
    });

यह तरीका, एलिमेंट से ऑडियो के लिए आउटपुट डिवाइस सेट करता है. setSinkId() को कॉल करने के बाद, sinkId प्रॉपर्टी की मदद से, एलिमेंट के लिए मौजूदा आउटपुट ऑडियो डिवाइस का आईडी पाया जा सकता है.

getUserMedia()

यह navigator.getUserMedia() की जगह लेता है. हालांकि, यह कॉलबैक का इस्तेमाल करने के बजाय, एक ऐसा प्रॉमिस दिखाता है जो MediaStream का ऐक्सेस देता है. डेवलपर को MediaDevices.getUserMedia() का इस्तेमाल करने का सुझाव दिया जाता है. हालांकि, navigator.getUserMedia() को हटाने का कोई प्लान नहीं है: यह स्पेसिफ़िकेशन का हिस्सा बना रहेगा.

WebRTC के सैंपल वाली साइट पर एक डेमो उपलब्ध है.

यहां डेमो के कोड का एक फ़्रैगमेंट दिया गया है:

navigator.mediaDevices.getUserMedia(constraints)
    .then(function(stream) {
    var videoTracks = stream.getVideoTracks();
    console.log('Got stream with constraints:', constraints);
    console.log('Using video device: ' + videoTracks[0].label);
    stream.onended = function() {
        console.log('Stream ended');
    };
    window.stream = stream; // make variable available to console
    video.srcObject = stream;
    })
    .catch(function(error) {
    // ...
    }

शुल्क माफ़ करना

Chrome में enumerateDevices() का तरीका 'फ़्लैगलेस' है, जबकि MediaDevices.getUserMedia() के लिए आपको अब भी chrome://flags में वेब प्लैटफ़ॉर्म की एक्सपेरिमेंटल सुविधाएं चालू करनी होंगी या नीचे दिए गए कमांड लाइन फ़्लैग का इस्तेमाल करना होगा:

--enable-blink-features=GetUserMedia

setSinkId() के लिए भी इसी तरह: वेब प्लैटफ़ॉर्म की एक्सपेरिमेंटल सुविधाएं चालू करें या किसी फ़्लैग का इस्तेमाल करें:

--enable-blink-features=AudioOutputDevices

ब्राउज़र के साथ काम करने के बारे में ज़्यादा जानकारी यहां दी गई है.

आने वाला समय

सुझाया गया ondevicechange इवेंट हैंडलर वही करता है जो वह कहता है: उपलब्ध डिवाइसों का सेट बदलने पर, devicechange इवेंट ट्रिगर होता है. साथ ही, हैंडलर में डिवाइसों की नई सूची पाने के लिए, enumerateDevices() को कॉल किया जा सकता है. फ़िलहाल, इसे किसी भी ब्राउज़र में लागू नहीं किया गया है.

स्क्रीन कैप्चर ड्राफ़्ट, Media Capture API का एक एक्सटेंशन है. इसमें MediaDevices.getDisplayMedia() का एक ऐसा तरीका बताया गया है जिससे उपयोगकर्ता के डिसप्ले के किसी हिस्से को मीडिया स्ट्रीम के सोर्स के तौर पर इस्तेमाल किया जा सकता है. getSupportedConstraints() के लिए, MediaDevices एक्सटेंशन का भी प्रस्ताव है. इससे यह जानकारी मिलती है कि getUserMedia() कॉल के लिए किन पाबंदियों का इस्तेमाल किया जा सकता है: ब्राउज़र पर काम करने वाली ऑडियो और वीडियो सुविधाएं.

डेमो

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