Web uygulamanızdan kamera, mikrofon ve hoparlör seçin

Sam Dutton

Modern tarayıcılar; kamera, mikrofon ve hoparlör gibi giriş ve çıkış cihazlarını seçmeyi mümkün kılar.

Örneğin:

  • Telefonda ön veya arka kamerayı seçin.
  • Dizüstü bilgisayarlarda dahili hoparlörleri veya Bluetooth ile bağlı bir hoparlörü seçin.
  • Görüntülü sohbet için dahili veya harici mikrofon ya da kamera seçin.

Bu işlevlerin tümü, navigator.mediaDevices tarafından döndürülen MediaDevices nesnesi tarafından sağlanır.

MediaDevices'in iki yöntemi vardır. Her ikisi de masaüstü ve Android'de Chrome 47'de uygulanmıştır: enumerateDevices() ve getUserMedia().

Ses çıkış cihazı seçme.

enumerateDevices()

Mevcut cihazlar için bir MediaDeviceInfo nesnesi dizisine erişim sağlayan bir Promise döndürür.

Bu yöntem MediaStreamTrack.getSources() yöntemine benzer ancak yalnızca Chrome'da uygulanan bu yöntemin aksine standartlara uygundur ve ses çıkış cihazlarını içerir. Bunu aşağıdaki demolarla deneyebilirsiniz.

Aşağıda, demolardan birinde kullanılan ve biraz basitleştirilmiş bir kod verilmiştir:

navigator.mediaDevices.enumerateDevices()
    .then(gotDevices)
    .catch(errorCallback);
...
function gotDevices(deviceInfos) {

    ...

    for (var i = 0; i !== deviceInfos.length; ++i) {
    var deviceInfo = deviceInfos[i];
    var option = document.createElement('option');
    option.value = deviceInfo.deviceId;
    if (deviceInfo.kind === 'audioinput') {
        option.text = deviceInfo.label ||
        'Microphone ' + (audioInputSelect.length + 1);
        audioInputSelect.appendChild(option);
    } else if (deviceInfo.kind === 'audiooutput') {
        option.text = deviceInfo.label || 'Speaker ' +
        (audioOutputSelect.length + 1);
        audioOutputSelect.appendChild(option);
    } else if (deviceInfo.kind === 'videoinput') {
        option.text = deviceInfo.label || 'Camera ' +
        (videoSelect.length + 1);
        videoSelect.appendChild(option);
    }

    ...

}

enumerateDevices() ile kullanılabilir cihazların kimliklerini aldıktan sonra, bir video veya ses öğesinin ses çıkış hedefini değiştirmek için setSinkId()'ı (Audio Output Devices API'de tanımlanmıştır) kullanabilirsiniz:

element.setSinkId(sinkId)
    .then(function() {
    console.log('Audio output device attached: ' + sinkId);
    })
    .catch(function(error) {
    // ...
    });

Bu yöntem, öğeden ses için çıkış cihazını ayarlar. setSinkId() çağrıldıktan sonra, sinkId mülküne sahip öğenin geçerli çıkış ses cihazının kimliğini alabilirsiniz.

getUserMedia()

Bu, navigator.getUserMedia()'ün yerini alır ancak geri çağırma işlevi yerine MediaStream'a erişim sağlayan bir Promise döndürür. Geliştiricilerin MediaDevices.getUserMedia() kullanmaları önerilir ancak navigator.getUserMedia()'ı kaldırma planı yoktur: navigator.getUserMedia(), spesifikasyonun bir parçası olmaya devam eder.

WebRTC örnekleri sitesinde bir demo bulunmaktadır.

Demo'daki bir kod parçası aşağıda verilmiştir:

navigator.mediaDevices.getUserMedia(constraints)
    .then(function(stream) {
    var videoTracks = stream.getVideoTracks();
    console.log('Got stream with constraints:', constraints);
    console.log('Using video device: ' + videoTracks[0].label);
    stream.onended = function() {
        console.log('Stream ended');
    };
    window.stream = stream; // make variable available to console
    video.srcObject = stream;
    })
    .catch(function(error) {
    // ...
    }

Bayrak sallayarak

enumerateDevices() yöntemi Chrome'da "işaretsiz"dir. MediaDevices.getUserMedia() için ise chrome://flags adresinde Deneysel Web Platformu özelliklerini etkinleştirmeniz veya aşağıdaki komut satırı işaretini kullanmanız gerekir:

--enable-blink-features=GetUserMedia

setSinkId() için de aynı şekilde: Deneysel Web Platformu özelliklerini etkinleştirin veya bir işaret kullanın:

--enable-blink-features=AudioOutputDevices

Tarayıcı desteği hakkında daha fazla bilgiyi aşağıda bulabilirsiniz.

Gelecek

Önerilen ondevicechange etkinlik işleyici, adından da anlaşılacağı gibi, kullanılabilir cihaz grubu değiştiğinde devicechange etkinliğini tetikler. Bir işleyicide, yeni cihaz listesini almak için enumerateDevices() işlevini çağırabilirsiniz. Bu özellik henüz hiçbir tarayıcıda uygulanmadı.

Ekran Görüntüsü taslağı, Media Capture API'nin bir uzantısıdır. Bu uzantı, kullanıcının ekranının bölgelerinin medya akışının kaynağı olarak kullanılmasını sağlayan bir MediaDevices.getDisplayMedia() yöntemi önerir. Ayrıca, getSupportedConstraints() için MediaDevices uzantı önerisi de vardır. Bu öneri, getUserMedia() görüşmesi için hangi kısıtlamaların kullanılabileceği hakkında bilgi sağlar: tarayıcı tarafından desteklenen ses ve video özellikleri.

Demolar

Daha fazla bilgi