Medya cihazlarını kullanmaya başlama

WebRTC standardı, web için geliştirme yapılırken erişim için API'ler sağlar. bilgisayara veya akıllı telefona bağlı kameralar ve mikrofonlar. Bu cihazlar Genellikle Medya Cihazları olarak bilinir ve JavaScript ile erişilebilir MediaDevices öğesini uygulayan navigator.mediaDevices nesnesi üzerinden kullanır. Bu nesneden tüm bağlı cihazları sıralayabilir, cihaz değişiklikleri (cihaz bağlıyken veya bağlı değilken) ve bir cihazı açtığında tıklayın (aşağıya bakın).

Bunun en sık kullanıldığı yöntem, getUserMedia() fonksiyonudur. eşleşen medya için MediaStream sonuçlandıracak bir söz döndürür cihazlar. Bu işlev, şu koşulları karşılayan tek bir MediaStreamConstraints nesnesi alır: gereksinimlerimiz var. Örneğin, varsayılan mikrofon ve kamera varsa aşağıdakileri yaparız.

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() çağrısı, bir izin isteğini tetikler. Kullanıcı izni kabul ettiğinde söz, aşağıdakileri içeren bir MediaStream ile çözülür: Bir video ve bir ses parçası. İzin reddedilirse PermissionDeniedError atıldı. Eşleşen cihaz olmadığında bağlı olduğunda, bir NotFoundError atılır.

MediaDevices arayüzünün tam API referansını MDN web'de bulabilirsiniz dokümanlarına göz atın.

Medya cihazlarını sorgulama

Daha karmaşık bir uygulamada, büyük olasılıkla tüm kameralar ve mikrofonlar kullanabilir ve bağlı olduğunuz belirtir. Bu işlem, enumerateDevices() fonksiyonu çağrılarak yapılabilir. Bu, şunu açıklayan bir MediaDevicesInfo dizisine dönüşen bir söz döndürür: bilinen her medya cihazı dahildir. Bunu, kullanıcıya bir kullanıcı arayüzü sunmak için kullanabiliriz. tercih ettikleri seçeneği belirleyin. Her MediaDevicesInfo, audioinput, audiooutput veya videoinput değerini içeren kind olduğunu öğrendim.

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

Cihazlardaki değişiklikler bekleniyor

Çoğu bilgisayar çalışma zamanı boyunca çeşitli cihazların bağlanmasını destekler. Bu, şirket için bir web kamerası USB, Bluetooth mikrofonlu kulaklık veya bir dizi harici hoparlörle bağlanıyor. İçinde bir web uygulaması, bu yapılandırmanın doğru şekilde desteklenmesi için değişiklikleri dinlemelidir. izin veriliyor. Bu, dosyaya bir dinleyici ekleyerek devicechange etkinliği için 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);
});

Medya kısıtlamaları

MediaStreamConstraints öğesini uygulaması gereken kısıtlamalar nesnesi getUserMedia() öğesine parametre olarak ilettiğimiz kod snippet'ini belirli bir gereksinimle eşleşen medya cihazı Bu şart, genel olarak tanımlanmış (ses ve/veya video) ya da çok spesifik (minimum kamera veya tam cihaz kimliğini belirtin). Optimum kampanya performansı için getUserMedia() API, önce mevcut cihazları kontrol eder, ardından deviceId kısıtlamasını kullanan tam cihaz ile eşleşen kısıtlamadır. Ayrıca, mümkünse cihazlar kısıtlamalara göre yapılandırılır. Biz mikrofonlarda yankı giderme özelliğini etkinleştirebilir veya belirli ya da minimum bir genişlik ayarlayabilirsiniz ve videonun kameradan yüksekliği.

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 arayüzüyle ilgili dokümanların tamamına ulaşabilirsiniz MDN web dokümanlarına göz atın.

Yerel oynatma

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

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 playsinline özelliklerine sahiptir. autoplay özelliğinin değeri, öğeye atanan yeni akışların otomatik olarak oynatılmasına neden olur. playsinline özelliği, videonun yalnızca tam olarak değil, satır içinde de oynatılmasını sağlar yeni ekran görüntüsüdür. Optimum kampanya performansı için Kullanıcının duraklatması gerekmediği sürece canlı yayınlar için controls="false" gerekir.

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