Pilih kamera, mikrofon, dan speaker dari aplikasi web Anda

Sam Dutton

Browser modern memungkinkan Anda memilih perangkat input dan output, termasuk kamera, mikrofon, dan speaker.

Contoh:

  • Di ponsel, pilih kamera depan atau belakang.
  • Di laptop, pilih speaker internal atau speaker yang terhubung melalui Bluetooth.
  • Untuk melakukan chat video, pilih mikrofon atau kamera internal atau eksternal.

Semua fungsi ini diekspos oleh objek MediaDevices, yang ditampilkan oleh navigator.mediaDevices.

MediaDevices memiliki dua metode, keduanya diterapkan di Chrome 47 di desktop dan Android: enumerateDevices() dan getUserMedia().

Memilih perangkat output audio.

enumerateDevices()

Menampilkan Promise yang memberikan akses ke array objek MediaDeviceInfo untuk perangkat yang tersedia.

Metode ini mirip dengan MediaStreamTrack.getSources(), tetapi tidak seperti metode tersebut (yang hanya pernah diimplementasikan di Chrome), metode ini mematuhi standar dan menyertakan perangkat output audio. Anda dapat mencobanya dengan demo di bawah.

Berikut beberapa kode yang sedikit disederhanakan dari salah satu demo:

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

    ...

}

Setelah mengambil ID perangkat yang tersedia dengan enumerateDevices(), Anda dapat menggunakan setSinkId() (ditentukan dalam Audio Output Devices API) untuk mengubah tujuan output audio untuk elemen video atau audio:

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

Metode ini menetapkan perangkat output untuk audio dari elemen. Setelah setSinkId() dipanggil, Anda bisa mendapatkan ID perangkat audio output saat ini untuk elemen dengan properti sinkId.

getUserMedia()

Ini menggantikan navigator.getUserMedia(), tetapi bukan menggunakan callback, menampilkan Promised yang memberikan akses ke MediaStream. Developer dianjurkan untuk menggunakan MediaDevices.getUserMedia(), tetapi tidak ada rencana untuk menghapus navigator.getUserMedia(): navigator.getUserMedia() tetap menjadi bagian dari spesifikasi.

Ada demo di situs contoh WebRTC.

Berikut adalah fragmen kode dari demo:

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) {
    // ...
    }

Pengabaian tanda

Metode enumerateDevices() adalah 'tanpa tanda' di Chrome, sedangkan untuk MediaDevices.getUserMedia(), Anda masih perlu mengaktifkan Fitur Platform Web Eksperimental di chrome://flags atau menggunakan tanda command line berikut:

--enable-blink-features=GetUserMedia

Demikian pula untuk setSinkId(): aktifkan Fitur Platform Web Eksperimental atau gunakan flag:

--enable-blink-features=AudioOutputDevices

Detail selengkapnya tentang dukungan browser ada di bawah.

Acara mendatang

Pengendali peristiwa ondevicechange yang diusulkan melakukan hal yang dinyatakan: peristiwa devicechange diaktifkan saat kumpulan perangkat yang tersedia berubah, dan di pengendali, Anda dapat memanggil enumerateDevices() untuk mendapatkan daftar perangkat baru. Hal ini belum diterapkan di browser apa pun.

Draf Screen Capture adalah ekstensi ke Media Capture API yang mengusulkan metode MediaDevices.getDisplayMedia() yang memungkinkan wilayah tampilan pengguna digunakan sebagai sumber streaming media. Ada juga proposal ekstensi MediaDevices untuk getSupportedConstraints() , yang memberikan informasi tentang batasan yang dapat digunakan untuk panggilan getUserMedia(): kemampuan audio dan video yang didukung oleh browser.

Demo

Cari tahu selengkapnya