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 achterzijde.
  • Op een laptop kies je voor de interne speakers of een speaker die verbonden is via Bluetooth.
  • Voor een videochat kies je voor interne of externe microfoon of camera.

Al deze functionaliteit wordt zichtbaar gemaakt 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.

opsommenApparaten()

Retourneert een belofte 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 deze ook audio-uitvoerapparaten. Je kunt dit uitproberen met onderstaande demo's.

Hier is wat enigszins vereenvoudigde code uit 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) {
    // ...
    });

Met deze methode wordt het uitvoerapparaat voor audio van het element ingesteld. Nadat setSinkId() is aangeroepen, kunt u de ID van het huidige uitvoeraudioapparaat voor het element ophalen met de eigenschap sinkId .

getUserMedia()

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

Er is een demo op de WebRTC-voorbeeldsite .

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 afzien

De methode enumerateDevices() is 'flagless' in Chrome, terwijl je voor MediaDevices.getUserMedia() nog steeds Experimental Web Platform-functies moet inschakelen in chrome://flags of de volgende opdrachtregelvlag moet gebruiken:

--enable-blink-features=GetUserMedia

Hetzelfde geldt voor setSinkId() : schakel Experimentele Web Platform-functies in of gebruik een vlag:

--enable-blink-features=AudioOutputDevices

Hieronder vindt u meer informatie over browserondersteuning.

De toekomst

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

Het Screen Capture-concept is een uitbreiding op de Media Capture API die een MediaDevices.getDisplayMedia() -methode voorstelt waarmee delen van het beeldscherm van een gebruiker kunnen worden gebruikt als bron van een mediastream. Er is ook een MediaDevices extensievoorstel 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 te weten komen