使用WebRTC如何選擇麥克風和攝像頭？

Question

使用 API navigator.mediaDevices.enumerateDevices() 我得到了計算機中可用設備的 ID，但我不知道如何告訴導航器我想切換相機或麥克風。 在論壇中有很多例子，但沒有一個是清楚的，因為 webRTC 多次更改了 API 及其參考。 網絡上只有一個例子，由 webRTC 提出，但我無法真正理解它，或者至少我在它的代碼中找不到我需要的東西。

我沒有嘗試太多，因為我對 webRTC 很陌生......

if(!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) console.log('Enumerate Media Devices from getUserMedia is not supported');
navigator.mediaDevices.enumerateDevices()
    .then(function(devices) {
        devices.forEach(function(device) {
            if (device.kind == 'audioinput' || device.kind == 'audiooutput') $scope.devicesAudio.push(device);
            else if (device.kind == 'videoinput' || device.kind == 'videooutput') $scope.devicesVideo.push(device);
            else $scope.devices.push(device);
        });
    })
    .catch(function(err) {
        console.log(err.name + ':' + err.message);
    });




$scope.selectDevice = function(device) {

    if(device.kind == 'videooutput' || device.kind == 'videoinput') {
        console.log('video Device selected' + ' DEVICE_ID: ' + device.deviceId);
    }
    else if(device.kind == 'audioinput' || device.kind == 'videooutput') {
        console.log('Audio device selected' + ' DEVICE_ID: ' + device.deviceId);
    };
};

我希望我的應用程序可以選擇更換攝像頭和麥克風...

Answer 1

使用deviceId約束。 我已經更新了MDN來提及它。

$scope.selectDevice = function(device) {
  let constraints, oldtrack;
  if (device.kind == 'videoinput') {
    constraints = {video: { deviceId: {exact: device.deviceId}}};
    oldtrack = (video.srcObject || []).getVideoTracks()[0];
  } else {
    constraints = {audio: { deviceId: {exact: device.deviceId}}};
    oldtrack = (video.srcObject || []).getAudioTracks()[0];
  }
  // Most phones only handle one camera open at a time, so stop old device first.
  if (oldtrack) {
    oldtrack.stop();
  }
  return navigator.mediaDevices.getUserMedia(constraints) 
    .then(stream => video.srcObject = stream);
    .catch(err => console.log(err.name + ':' + err.message));
}

使用exact關鍵字來防止回退到不同的設備，因為這是一個選擇器。

您可以忽略"audiooutput" ，因為它們是揚聲器，而不是麥克風。 也沒有像"videooutput"這樣的東西。 這是一個無效的值。 我想這些將是顯示，但那些沒有被enumerateDevices() 。

以上僅用於說明，以展示 API 的工作原理。 由於我們正在處理硬件，因此制作一個健壯的選擇器是留給讀者的練習。

例如：大多數手機只能同時打開一個攝像頭。 例如，還可能存在其他沖突，例如從使用的相機以外的相機獲取麥克風。 比較device.groupId屬性以了解攝像頭和麥克風是否在同一硬件上。 例如，如果它們匹配，最好同時更換相機和麥克風。

如果您懷疑硬件問題，請在您的系統上嘗試WebRTC 示例演示。