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

Sam Dutton

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

Örneğin:

  • Telefonlarda ön veya arka kamerayı seçin.
  • Dizüstü bilgisayarda, 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 kamerayı seçin.

Tüm bu işlevler, navigator.mediaDevices tarafından döndürülen MediaDevices nesnesi tarafından sunulur.

MediaDevices iki yönteme sahiptir: Hem masaüstündeki Chrome 47'de hem de Android'de: enumerateDevices() ve getUserMedia().

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

enumerateDevices()

Kullanılabilir cihazlar için bir MediaDeviceInfo nesne dizisine erişim sağlayan bir Promise döndürür.

Bu yöntem MediaStreamTrack.getSources()'e benzer ancak şimdiye kadar yalnızca Chrome'da uygulanmış olan bu yöntemin aksine standartlarla uyumludur ve ses çıkışı cihazları içerir. Aşağıdaki demolarla bunu deneyebilirsiniz.

Aşağıda, demoların birindeki biraz basitleştirilmiş 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() (Ses Çıkış Cihazları API'sinde tanımlanır) kullanabilirsiniz:

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

Bu yöntem, öğeden gelen ses için çıkış cihazını ayarlar. setSinkId() çağrıldıktan sonra, sinkId özelliğine sahip öğe için geçerli ses çıkış cihazının kimliğini alabilirsiniz.

getUserMedia()

Bu, navigator.getUserMedia() öğesinin yerini alır ancak geri çağırma yerine MediaStream öğesine erişim sağlayan bir Promise döndürür. Geliştiricilerin MediaDevices.getUserMedia() kullanması önerilir ancak navigator.getUserMedia() ürününün kaldırılması gibi bir planı yoktur: Bu özellik, spesifikasyonların bir parçası olmaya devam etmektedir.

WebRTC örnekleri sitesinde bir demo vardır.

Aşağıda, demodaki kod parçasını görebilirsiniz:

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 silme

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

--enable-blink-features=GetUserMedia

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

--enable-blink-features=AudioOutputDevices

Tarayıcı desteği hakkında daha ayrıntılı bilgiyi aşağıda bulabilirsiniz.

Gelecek

Önerilen ondevicechange etkinlik işleyici, belirtilen işlemi gerçekleştirir: Kullanılabilir cihaz grubu değiştiğinde devicechange etkinliği tetiklenir. İşleyicide yeni cihaz listesini almak için enumerateDevices() yöntemini çağırabilirsiniz. Bu henüz hiçbir tarayıcıda uygulanmadı.

Ekran Yakalama taslağı, bir medya akışının kaynağı olarak kullanıcı ekranının bölgelerinin kullanılmasını sağlayan bir MediaDevices.getDisplayMedia() yöntemi öneren bir Medya Yakalama API'si uzantısıdır. getSupportedConstraints() için bir MediaDevices uzantı teklifi de vardır. Bu teklifte, bir getUserMedia() görüşmesinde tarayıcının desteklediği ses ve görüntü özellikleri olan kısıtlamalar hakkında bilgi verilir.

Demolar

Daha fazla bilgi