Kies camera's, microfoons en luidsprekers uit uw webapp

Sam Dutton

Moderne browsers maken het mogelijk om invoer- en uitvoerapparaten te selecteren, waaronder camera's, microfoons en luidsprekers.

Bijvoorbeeld:

  • Selecteer op een telefoon de camera aan de voor- of achterkant.
  • Kies op een laptop voor de interne luidsprekers of een luidspreker die via Bluetooth is verbonden.
  • Voor een videogesprek kunt u kiezen voor een interne of externe microfoon of camera.

Al deze functionaliteit wordt weergegeven door het MediaDevices-object, dat wordt geretourneerd door navigator.mediaDevices .

MediaDevices heeft twee methoden, beide geïmplementeerd in Chrome 47 op desktop en Android: enumerateDevices() en getUserMedia() .

Een audio-uitvoerapparaat selecteren.

enumerateDevices()

Retourneert een Promise die toegang geeft tot een reeks MediaDeviceInfo objecten voor beschikbare apparaten.

De methode is vergelijkbaar met MediaStreamTrack.getSources() , maar in tegenstelling tot die methode (die alleen in Chrome is geïmplementeerd) voldoet deze aan de standaarden en omvat het audio-uitvoerapparaten. Je kunt dit uitproberen met de onderstaande demo's.

Hier is wat licht vereenvoudigde code van een van de demo's:

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

    ...

}

Nadat u de ID's van beschikbare apparaten hebt opgehaald met enumerateDevices() , kunt u setSinkId() (gedefinieerd in de Audio Output Devices API ) gebruiken om de audio-uitvoerbestemming voor een video- of audio-element te wijzigen:

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

Deze methode stelt het uitvoerapparaat voor audio van het element in. Nadat setSinkId() is aangeroepen, kunt u de ID van het huidige uitvoerapparaat voor audio voor het element ophalen met de eigenschap sinkId .

getUserMedia()

Dit vervangt navigator.getUserMedia() , maar in plaats van een callback te gebruiken, retourneert het een Promise die toegang geeft tot een MediaStream . Ontwikkelaars wordt aangeraden MediaDevices.getUserMedia() te gebruiken, maar er zijn geen plannen om navigator.getUserMedia() te verwijderen: het blijft onderdeel van de specificatie .

Er is een demo beschikbaar op de website met WebRTC-voorbeelden .

Hier is een codefragment uit de 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) {
    // ...
    }

Vlag zwaaien

De enumerateDevices() methode is 'flagless' in Chrome, terwijl u voor MediaDevices.getUserMedia() nog steeds de experimentele webplatformfuncties moet inschakelen in chrome://flags of de volgende opdrachtregelvlag moet gebruiken:

--enable-blink-features=GetUserMedia

Hetzelfde geldt voor setSinkId() : schakel experimentele webplatformfuncties in of gebruik een vlag:

--enable-blink-features=AudioOutputDevices

Meer informatie over browserondersteuning vindt u hieronder.

De toekomst

De voorgestelde ondevicechange -gebeurtenishandler doet wat hij belooft: de devicechange -gebeurtenis wordt geactiveerd wanneer de set beschikbare apparaten verandert, en in een handler kun je enumerateDevices() aanroepen om de nieuwe lijst met apparaten op te vragen. Dit is nog in geen enkele browser geïmplementeerd.

Het Screen Capture-concept is een uitbreiding van de Media Capture API die een MediaDevices.getDisplayMedia() methode voorstelt waarmee delen van het scherm van een gebruiker kunnen worden gebruikt als bron voor een mediastream. Er is ook een MediaDevices uitbreidingsvoorstel voor getSupportedConstraints() , dat informatie biedt over welke beperkingen kunnen worden gebruikt voor een getUserMedia() aanroep: audio- en videomogelijkheden die door de browser worden ondersteund.

Demo's

Meer informatie