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

वेब के लिए डेवलप करते समय, WebRTC मानक ऐक्सेस करने के लिए API प्रदान करता है कंप्यूटर या स्मार्टफ़ोन से कनेक्ट किए गए कैमरे और माइक्रोफ़ोन. ये डिवाइस आम तौर पर, इन्हें मीडिया डिवाइस कहा जाता है. इन्हें JavaScript की मदद से ऐक्सेस किया जा सकता है navigator.mediaDevices ऑब्जेक्ट के ज़रिए, जो 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 में kind, जिसका मान audioinput, audiooutput या videoinput है. यह दिखाता है कि यह किस तरह का मीडिया डिवाइस है.

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);
});

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

कंस्ट्रेंट ऑब्जेक्ट, जिसे MediaStreamConstraints को लागू करना होगा इंटरफ़ेस है, जिसे हम getUserMedia() को पैरामीटर के रूप में पास करते हैं, जिसकी सहायता से हम वह मीडिया डिवाइस जो किसी खास शर्त को पूरा करता हो. यह ज़रूरी शर्त ऑडियो और/या वीडियो के बारे में साफ़ तौर पर जानकारी देने वाला या बहुत खास (कम से कम कैमरा) रिज़ॉल्यूशन या डिवाइस आईडी की सटीक जानकारी दें. यह अनुशंसा की जाती है कि वे ऐप्लिकेशन getUserMedia() API, सबसे पहले मौजूदा डिवाइसों की जांच करता है. इसके बाद, यह तय करता है कि ऐसा कंस्ट्रेंट जो 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 इंटरफ़ेस के लिए पूरा दस्तावेज़ मिल सकता है MDN वेब पर दस्तावेज़.

लोकल प्लेबैक

मीडिया डिवाइस को खोलने और हमारे पास 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>