使用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 示例演示。