गूगल काले समुदायों के लिए जातीय इक्विटी को आगे बढ़ाने के लिए प्रतिबद्ध है। देखो कैसे।
इस पेज का अनुवाद Cloud Translation API से किया गया है.
Switch to English

मीडिया उपकरण के साथ आरंभ

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

के लिए पूरी API संदर्भ 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 / इंतजार

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

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

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

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

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

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