मीडिया डिवाइसों का इस्तेमाल शुरू करना

वेब के लिए डेवलप करते समय, WebRTC स्टैंडर्ड, कंप्यूटर या स्मार्टफ़ोन से कनेक्ट किए गए कैमरे और माइक्रोफ़ोन को ऐक्सेस करने के लिए एपीआई उपलब्ध कराता है. इन डिवाइसों को आम तौर पर मीडिया डिवाइस कहा जाता है. इन्हें navigator.mediaDevices ऑब्जेक्ट की मदद से, JavaScript से ऐक्सेस किया जा सकता है. यह MediaDevices इंटरफ़ेस को लागू करता है. इस ऑब्जेक्ट से, हम कनेक्ट किए गए सभी डिवाइसों की सूची बना सकते हैं, डिवाइस में हुए बदलावों (डिवाइस के कनेक्ट या डिसकनेक्ट होने पर) को सुन सकते हैं, और मीडिया स्ट्रीम को वापस पाने के लिए कोई डिवाइस खोल सकते हैं (नीचे देखें).

आम तौर पर, getUserMedia() फ़ंक्शन के ज़रिए इसका इस्तेमाल किया जाता है. यह प्रॉमिस देता है और मिलते-जुलते मीडिया डिवाइसों के लिए MediaStream का इस्तेमाल करता है. यह फ़ंक्शन एक MediaStreamConstraints ऑब्जेक्ट लेता है, जो हमारी ज़रूरी शर्तों के बारे में बताता है. उदाहरण के लिए, सिर्फ़ डिफ़ॉल्ट माइक्रोफ़ोन और कैमरा खोलने के लिए, हम ये काम करेंगे.

const constraints = {
    'video': true,
    'audio': true
}
navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
        console.log('Got MediaStream:', stream);
    })
    .catch(error => {
        console.error('Error accessing media devices.', error);
    });

const openMediaDevices = async (constraints) => {
    return await navigator.mediaDevices.getUserMedia(constraints);
}

try {
    const stream = openMediaDevices({'video':true,'audio':true});
    console.log('Got MediaStream:', stream);
} catch(error) {
    console.error('Error accessing media devices.', error);
}

getUserMedia() पर किए जाने वाले कॉल से, अनुमतियों का अनुरोध ट्रिगर होगा. अगर उपयोगकर्ता अनुमति स्वीकार कर लेता है, तो प्रॉमिस को MediaStream के साथ रिज़ॉल्व किया जाता है. इसमें एक वीडियो और एक ऑडियो ट्रैक शामिल होता है. अगर अनुमति नहीं दी जाती है, तो PermissionDeniedError को इस्तेमाल किया जाता है. अगर मिलता-जुलता कोई डिवाइस कनेक्ट नहीं है, तो NotFoundError इस्तेमाल किया जाएगा.

MediaDevices इंटरफ़ेस का पूरा एपीआई रेफ़रंस, MDN वेब दस्तावेज़ों पर उपलब्ध है.

मीडिया डिवाइसों से जुड़ी क्वेरी की जा रही है

ज़्यादा जटिल ऐप्लिकेशन में, हम इसकी कोशिश करेंगे कि सभी कनेक्ट किए गए कैमरे और माइक्रोफ़ोन हों. साथ ही, हम उपयोगकर्ता को सही सुझाव भी देना चाहेंगे. enumerateDevices() फ़ंक्शन को कॉल करके ऐसा किया जा सकता है. इससे एक ऐसा प्रॉमिस मिलेगा जो MediaDevicesInfo की कैटगरी में ले जाता है. इस कलेक्शन में हर मीडिया डिवाइस के बारे में जानकारी होती है. इसका इस्तेमाल करके, हम लोगों को एक यूज़र इंटरफ़ेस (यूआई) दिखा सकते हैं. इससे वह अपनी पसंद का यूज़र इंटरफ़ेस (यूआई) चुन सकता है. हर MediaDevicesInfo में audioinput, audiooutput या videoinput वैल्यू वाली kind नाम की प्रॉपर्टी होती है, जिससे पता चलता है कि यह किस तरह का मीडिया डिवाइस है.

function getConnectedDevices(type, callback) {
    navigator.mediaDevices.enumerateDevices()
        .then(devices => {
            const filtered = devices.filter(device => device.kind === type);
            callback(filtered);
        });
}

getConnectedDevices('videoinput', cameras => console.log('Cameras found', cameras));

async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

const videoCameras = getConnectedDevices('videoinput');
console.log('Cameras found:', videoCameras);

डिवाइसों में हुए बदलावों को सुनना

ज़्यादातर कंप्यूटर रनटाइम के दौरान अलग-अलग डिवाइसों को प्लग-इन करने की सुविधा देते हैं. यह यूएसबी, ब्लूटूथ हेडसेट या बाहरी स्पीकर के सेट से जुड़ा हुआ वेबकैम हो सकता है. यह ठीक से काम कर सके, इसके लिए वेब ऐप्लिकेशन को मीडिया डिवाइस में हुए बदलावों को भी सुन लेना चाहिए. ऐसा करने के लिए, devicechange इवेंट के लिए navigator.mediaDevices में एक लिसनर जोड़कर ऐसा किया जा सकता है.

// Updates the select element with the provided set of cameras
function updateCameraList(cameras) {
    const listElement = document.querySelector('select#availableCameras');
    listElement.innerHTML = '';
    cameras.map(camera => {
        const cameraOption = document.createElement('option');
        cameraOption.label = camera.label;
        cameraOption.value = camera.deviceId;
    }).forEach(cameraOption => listElement.add(cameraOption));
}

// Fetch an array of devices of a certain type
async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

// Get the initial set of cameras connected
const videoCameras = getConnectedDevices('videoinput');
updateCameraList(videoCameras);

// Listen for changes to media devices and update the list accordingly
navigator.mediaDevices.addEventListener('devicechange', event => {
    const newCameraList = getConnectedDevices('video');
    updateCameraList(newCameraList);
});

मीडिया कंस्ट्रेंट

कंस्ट्रेंट ऑब्जेक्ट, जिसे getUserMedia() में पैरामीटर के तौर पर पास किया जाता है. इस ऑब्जेक्ट को MediaStreamConstraints इंटरफ़ेस लागू करना होता है. इससे हम ऐसा मीडिया डिवाइस खोल सकते हैं जो तय की गई शर्त को पूरा करता हो. यह शर्त बहुत कम जानकारी देने वाली (ऑडियो और/या वीडियो) या बहुत सटीक (कम से कम कैमरे का रिज़ॉल्यूशन या डिवाइस आईडी) हो सकती है. यह सुझाव दिया जाता है कि getUserMedia() एपीआई का इस्तेमाल करने वाले ऐप्लिकेशन, पहले मौजूदा डिवाइसों की जांच करें और फिर deviceId कंस्ट्रेंट का इस्तेमाल करके, ऐसी पाबंदी बताएं जो सटीक डिवाइस से मेल खाती हो. अगर संभव हो, तो डिवाइसों को भी पाबंदियों के हिसाब से कॉन्फ़िगर किया जाएगा. हम माइक्रोफ़ोन पर इको रद्द करने की सुविधा चालू कर सकते हैं. इसके अलावा, कैमरे से वीडियो की तय या कम से कम चौड़ाई और ऊंचाई भी सेट कर सकते हैं.

async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

// Open camera with at least minWidth and minHeight capabilities
async function openCamera(cameraId, minWidth, minHeight) {
    const constraints = {
        'audio': {'echoCancellation': true},
        'video': {
            'deviceId': cameraId,
            'width': {'min': minWidth},
            'height': {'min': minHeight}
            }
        }

    return await navigator.mediaDevices.getUserMedia(constraints);
}

const cameras = getConnectedDevices('videoinput');
if (cameras && cameras.length > 0) {
    // Open first available video camera with a resolution of 1280x720 pixels
    const stream = openCamera(cameras[0].deviceId, 1280, 720);
}

MediaStreamConstraints इंटरफ़ेस के लिए पूरा दस्तावेज़, एमडीएन वेब दस्तावेज़ पर देखा जा सकता है.

डिवाइस पर चलाए जाने वाले वीडियो

मीडिया डिवाइस को खोलने और हमारे पास MediaStream उपलब्ध होने पर, हम स्ट्रीम को स्थानीय रूप से चलाने के लिए उसे किसी वीडियो या ऑडियो एलिमेंट को असाइन कर सकते हैं.

async function playVideoFromCamera() {
    try {
        const constraints = {'video': true, 'audio': true};
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        const videoElement = document.querySelector('video#localVideo');
        videoElement.srcObject = stream;
    } catch(error) {
        console.error('Error opening video camera.', error);
    }
}

getUserMedia() के साथ इस्तेमाल किए गए किसी वीडियो एलिमेंट के लिए ज़रूरी एचटीएमएल में आम तौर पर, autoplay और playsinline एट्रिब्यूट होते हैं. autoplay एट्रिब्यूट की वजह से, एलिमेंट के लिए असाइन की गई नई स्ट्रीम अपने-आप चलने लगेंगी. playsinline एट्रिब्यूट की मदद से, कुछ मोबाइल ब्राउज़र पर वीडियो को सिर्फ़ फ़ुल स्क्रीन पर देखने के बजाय इनलाइन तरीके से चलाया जा सकता है. हमारा सुझाव है कि लाइव स्ट्रीम के लिए controls="false" का इस्तेमाल करें, जब तक कि उपयोगकर्ता उन्हें रोक न सके.

<html>
<head><title>Local video playback</title></head>
<body>
    <video id="localVideo" autoplay playsinline controls="false"/>
</body>
</html>