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

Sam Dutton

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

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

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

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

MediaDevice के दो तरीके हैं. डेस्कटॉप और Android: enumerateDevices() और getUserMedia().

ऑडियो आउटपुट डिवाइस को चुना जा रहा है.

enumerateDevices()

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

तरीका इसके समान है MediaStreamTrack.getSources(), लेकिन इससे अलग में लागू किया जाता है, तो यह स्टैंडर्ड का पालन करने वाली और ऑडियो आउटपुट डिवाइस शामिल हैं. इसे आज़माने के लिए, नीचे दिया गया डेमो देखें.

यहां किसी डेमो में से थोड़ा आसान कोड दिया गया है:

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) {
    // ...
    }

झंडा फहराना

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

--enable-blink-features=GetUserMedia

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

--enable-blink-features=AudioOutputDevices

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

आने वाला समय

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

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

डेमो

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