Google is committed to advancing racial equity for Black communities. See how.
Bu sayfa, Cloud Translation API ile çevrilmiştir.
Switch to English

Medya aygıtlarını kullanmaya başlama

Web için geliştirirken, WebRTC standardı, bilgisayara veya akıllı telefona bağlı kameralara ve mikrofonlara erişmek için API'ler sağlar. Bu cihazlara genel olarak Medya Cihazları denir ve MediaDevices arayüzünü uygulayan navigator.mediaDevices nesnesi aracılığıyla JavaScript'e erişilebilir. Bu nesneden tüm bağlı cihazları numaralandırabilir, cihaz değişikliklerini dinleyebilir (bir cihaz bağlandığında veya bağlantısı kesildiğinde) ve bir Medya Akışı almak için bir cihaz açabiliriz (aşağıya bakın).

Bunun en yaygın olarak kullanıldığı yöntem, eşleşen medya aygıtları için bir MediaStream çözümlenecek bir söz veren getUserMedia() işlevidir. Bu işlev, sahip olduğumuz gereksinimleri belirten tek bir MediaStreamConstraints nesnesi alır. Örneğin, varsayılan mikrofonu ve kamerayı açmak için aşağıdakileri yaparız.

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

Zaman uyumsuz / beklemeyi kullanma

 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() çağrısı bir izin isteğini tetikleyecektir. Kullanıcı izni kabul ederse, söz bir video ve bir ses parçası içeren bir MediaStream ile çözümlenir. PermissionDeniedError reddedilirse, bir PermissionDeniedError atılır. Eşleşen bir cihaz yoksa, bir NotFoundError atılacaktır.

MediaDevices arabirimi için tam API başvurusu MDN web belgelerinde mevcuttur .

Medya aygıtlarını sorgulama

Daha karmaşık bir uygulamada, büyük olasılıkla bağlı tüm kameraları ve mikrofonları kontrol etmek ve kullanıcıya uygun geri bildirimi sağlamak isteyeceğiz. Bu, enumerateDevices() işlevini çağırarak yapılabilir. Bu, bilinen her ortam aygıtını tanımlayan bir MediaDevicesInfo dizisine MediaDevicesInfo bir söz döndürür. Bunu kullanıcıya, tercih ettiklerini seçmelerine izin veren bir kullanıcı arayüzü sunmak için kullanabiliriz. Her MediaDevicesInfo , ne tür bir ortam aygıtı olduğunu gösteren, audioinput , audiooutput veya videoinput değerine sahip kind adlı bir özellik içerir.

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

Zaman uyumsuz / beklemeyi kullanma

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

Cihaz değişikliklerini dinleme

Çoğu bilgisayar çalışma zamanı sırasında çeşitli aygıtları takmayı destekler. USB ile bağlı bir web kamerası, bir Bluetooth kulaklık veya bir dizi harici hoparlör olabilir. Bunu düzgün bir şekilde desteklemek için, bir web uygulamasının medya cihazlarındaki değişiklikleri dinlemesi gerekir. Bu, devicechange olayı için navigator.mediaDevices devicechange bir dinleyici ekleyerek yapılabilir.

 // 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ı

getUserMedia() parametresine parametre olarak getUserMedia() MediaStreamConstraints arabirimini uygulaması gereken kısıtlamalar nesnesi, belirli bir gereksinimle eşleşen bir medya aygıtını getUserMedia() izin verir. Bu gereksinim çok gevşek bir şekilde tanımlanabilir (ses ve / veya video) veya çok spesifik (minimum kamera çözünürlüğü veya tam bir cihaz kimliği) olabilir. getUserMedia() API'sini kullanan uygulamaların önce mevcut cihazları kontrol etmesi ve daha sonra deviceId kısıtlamasını kullanarak tam cihazla eşleşen bir kısıtlama belirtmesi deviceId . Cihazlar ayrıca mümkünse kısıtlamalara göre yapılandırılacaktır. Mikrofonlarda yankı engellemeyi etkinleştirebilir veya videonun kameradan belirli veya minimum genişliğini ve yüksekliğini ayarlayabiliriz.

 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 arabiriminin tüm belgeleri MDN web belgelerinde bulunabilir .

Yerel oynatma

Bir medya cihazı açıldıktan ve bir MediaStream mevcut olduğunda, akışı yerel olarak oynatmak için bir videoya veya ses öğesine atayabiliriz.

 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() ile kullanılan tipik bir video öğesi için gereken HTML genellikle autoplay ve autoplay playsinline özelliklerine sahiptir. Otomatik autoplay özelliği, öğeye atanan yeni akışların autoplay neden olur. playsinline özelliği, videonun belirli mobil tarayıcılarda yalnızca tam ekran yerine satır içi oynatılmasına izin verir. Kullanıcının duraklatması gerekmediği sürece, canlı akışlar için controls="false" kullanılması da önerilir.

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