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

Sam Dutton

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

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

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

यह सभी फ़ंक्शन MediaDevices ऑब्जेक्ट से सार्वजनिक होते हैं, जो navigator.mediaDevices से दिखता है.

Mediaडिवाइस में दो तरीके हैं, दोनों को डेस्कटॉप और 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() कॉल के लिए, किन पाबंदियों का इस्तेमाल किया जा सकता है: ऑडियो और वीडियो, जो ब्राउज़र पर काम करते हैं.

डेमो

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