Google Siyah toplulukları için ırksal eşitlik ilerleyen kararlıdır. Nasıl olduğunu gör.
Bu sayfa, Cloud Translation API ile çevrilmiştir.
Switch to English

ortam aygıtları ile başlarken

web için geliştirirken, WebRTC standart bilgisayar veya akıllı telefona bağlı kameralar ve mikrofonlar erişmek için API'ler sağlar. Bu cihazlar genellikle, ortam cihazları olarak adlandırılır ve üzerinden JavaScript erişilebilir navigator.mediaDevices olan uygular nesne, MediaDevices arayüz. Bu nesnenin itibaren, tüm bağlı cihazlar numaralandırabilmesidir (bir aygıt takıldığında ya da çıkarıldığında) cihazı değişiklikleri işler ve Medya Akışı (aşağıya bakınız) almak için bir cihaz açın.

Bu kullanılan en yaygın yolu işlevi geçer getUserMedia() bir sonucuna varılır bir söz verir MediaStream eşleştirme medya aygıtları için. Bu fonksiyon tek alır MediaStreamConstraints elimizde olduğunu belirtir gereksinimlerini nesnesi. Örneğin, sadece varsayılan mikrofonu ve kamerayı açmak için, aşağıdakileri yapardı.

Promises kullanma

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

Kullanılması zaman uyumsuz / bekliyoruz

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

Çağrısı getUserMedia() bir izin isteği tetikler. Kullanıcı izni kabul ederse, söz bir çözülene MediaStream bir video ve bir ses parçası içeren. İzni reddedilirse, bir PermissionDeniedError atılır. Durumunda bir, eşleşen cihazlar bağlanabilir vardır NotFoundError atılmış olacaktır.

Tam API başvurusu MediaDevices arayüzünde mevcuttur MDN web docs .

medya cihazlarını sorgulanıyor

Daha karmaşık bir uygulamada, biz büyük olasılıkla bağlı tüm kameralar ve mikrofonlar kontrol edip kullanıcıya uygun geribildirim sağlamak isteyecektir. Bu fonksiyon çağırarak yapılabilir enumerateDevices() . Bu söz dönecektir bir dizi için giderir MediaDevicesInfo her biri bilinen bir ortam aygıtı tarif etmektedir. Biz onları tercih ettikleri bir seçim yapalım kullanıcıya bir UI sunmak için kullanabilir. Her MediaDevicesInfo adında bir özellik içerir kind değer ile audioinput , audiooutput veya videoinput ne medya cihazının tipi belirten.

Promises kullanma

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

Kullanılması zaman uyumsuz / bekliyoruz

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

cihazlar değişiklikleri için dinleme

Çoğu bilgisayar çalışma zamanı sırasında çeşitli cihazlarda takarak destekler. Bu USB, Bluetooth kulaklığı veya harici hoparlörler takımından ile bağlanan bir web kamerası olabilir. Düzgün Bunu desteklemek için, bir web uygulaması medya cihazlarının değişiklikleri dinlemeliyiz. Bu için bir dinleyici ekleyerek yapılabilir navigator.mediaDevices için devicechange olayı.

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

Medya kısıtlamaları

Kısıtlamaları uygulamak zorunda olduğu, nesne MediaStreamConstraints biz bir parametre olarak geçmesini, arayüz getUserMedia() belli bir gereksinimi uyan ortam aygıtını açmak için bize izin verir. Bu gereklilik çok gevşek tanımlanmış (ses ve / veya video) veya edilebilmektedir çok spesifik (minimum kamera çözünürlüğü veya tam cihaz kimliği). Kullanımı uygulamaları önerilir getUserMedia() API öncelikle mevcut cihazlarını kontrol ve daha sonra kullanarak kesin cihazı eşleşen bir kısıtlamayı belirten deviceId kısıtlamasını. Cihazlar ayrıca, eğer mümkünse kısıtlamalarına göre yapılandırılacaktır. Biz mikrofonlar üzerinde eko iptali etkinleştirmek veya kameradan videonun bir spesifik ya da minimum genişlik ve yüksekliği ayarlayabilirsiniz.

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

Tam dokümantasyon MediaStreamConstraints arabirimde bulunabilir MDN web docs .

Yerel oynatma

Bir medya cihazı açıldı ve biz var sonra MediaStream mevcuttur, biz yerel akışı oynatmak için bir video veya ses öğesi atayabilirsiniz.

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

İle kullanıldığında tipik bir video öğesine için gerekli HTML getUserMedia() genellikle nitelikleri sahip olacak autoplay ve playsinline . autoplay özniteliği otomatik play elemana atanan yeni akışları neden olacaktır. playsinline niteliği belirli mobil tarayıcılarda yerine sadece tam ekran arasında, oyun satır içi videoyu sağlar. Aynı zamanda kullanımı önerilir controls="false" kullanıcı bunları duraklatmak mümkün olmalıdır sürece, canlı akışlar için.

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