Google is committed to advancing racial equity for Black communities. See how.
इस पेज का अनुवाद Cloud Translation API से किया गया है.
Switch to English

मीडिया उपकरणों के साथ शुरुआत करना

वेब के लिए विकसित करते समय, वेबआरटीसी मानक कंप्यूटर या स्मार्टफोन से जुड़े कैमरों और माइक्रोफोन तक पहुंचने के लिए एपीआई प्रदान करता है। इन उपकरणों को आमतौर पर मीडिया डिवाइसेस के रूप में संदर्भित किया जाता है और इसे 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);
    });
 

Async / प्रतीक्षा का उपयोग करना

 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 इंटरफ़ेस के लिए पूर्ण API संदर्भ MDN वेब डॉक्स पर उपलब्ध है।

मीडिया उपकरणों को छोड़कर

अधिक जटिल अनुप्रयोग में, हम सबसे अधिक संभावना है कि सभी जुड़े हुए कैमरों और माइक्रोफोनों की जांच करना चाहते हैं और उपयोगकर्ता को उचित प्रतिक्रिया प्रदान करना चाहते हैं। यह फ़ंक्शन enumerateDevices() को कॉल करके किया जा सकता है। यह एक वादा MediaDevicesInfo जो 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 / प्रतीक्षा का उपयोग करना

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

उपकरणों के परिवर्तन के लिए सुन रहा है

अधिकांश कंप्यूटर रनटाइम के दौरान विभिन्न उपकरणों में प्लगिंग का समर्थन करते हैं। यह USB, एक ब्लूटूथ हेडसेट, या बाहरी वक्ताओं का एक सेट से जुड़ा एक वेब कैमरा हो सकता है। इसे ठीक से समर्थन करने के लिए, एक वेब एप्लिकेशन को मीडिया उपकरणों के परिवर्तनों के लिए सुनना चाहिए। इस 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() हमें एक मीडिया डिवाइस खोलने की अनुमति देता है जो एक निश्चित आवश्यकता से मेल खाती है। यह आवश्यकता बहुत ही कम परिभाषित (ऑडियो और / या वीडियो), या बहुत विशिष्ट (न्यूनतम कैमरा रिज़ॉल्यूशन या एक सटीक डिवाइस आईडी) हो सकती है। यह अनुशंसा की जाती है कि getUserMedia() API का उपयोग करने वाले 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 इंटरफ़ेस के लिए पूर्ण प्रलेखन 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);
    }
}
 

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

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