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 dengan Bluetooth.
  • Untuk video chat, pilih mikrofon atau kamera internal atau eksternal.

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

MediaDevices memiliki dua metode yang diterapkan di Chrome 47 pada 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 diimplementasikan di Chrome), metode ini mematuhi standar dan menyertakan perangkat output audio. Anda dapat mencobanya dengan demo di bawah ini.

Berikut adalah 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) guna 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 akan menggantikan navigator.getUserMedia(), tetapi tidak menggunakan callback, melainkan menampilkan Promise yang memberikan akses ke MediaStream. Developer dianjurkan untuk menggunakan MediaDevices.getUserMedia(), tetapi tidak ada rencana untuk menghapus navigator.getUserMedia(): tetap menjadi bagian spesifikasi.

Ada demo di situs contoh WebRTC.

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

Penghilangan bendera

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

--enable-blink-features=GetUserMedia

Demikian juga untuk setSinkId(): aktifkan fitur Platform Web Eksperimental atau gunakan tanda:

--enable-blink-features=AudioOutputDevices

Detail selengkapnya tentang dukungan browser ada di bawah.

Acara mendatang

Pengendali peristiwa ondevicechange yang diusulkan melakukan fungsinya: peristiwa devicechange akan diaktifkan saat serangkaian 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 untuk Media Capture API yang mengusulkan metode MediaDevices.getDisplayMedia() yang memungkinkan area 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