使用WebRTC如何选择麦克风和摄像头? [英] Using WebRTC how to choose mic and camera?

问题描述

使用 API navigator.mediaDevices.enumerateDevices() 我得到了计算机中可用设备的 ID，但我不知道如何告诉导航器我想切换摄像头或麦克风.在论坛中有很多例子，但没有一个是清楚的，因为 webRTC 多次更改了 API 及其参考.网络上只有一个示例，由 webRTC 提出，但我无法真正理解它，或者至少我无法在其代码中找到我需要的内容.

Using the API navigator.mediaDevices.enumerateDevices() I got the ID of the devices available in the computer, but I don't know how to tell the navigator that I want to switch the camera or mic. In the forums there are many examples, but none is clear since webRTC changed many times the API and its reference. There is only one example in the web, proposed by webRTC but I can't really understand it or at least I cannot find in its code what I need.

我没有尝试太多，因为我对 webRTC 很陌生...

I have not tried much because I am very new with 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);
    };
};

我希望我的应用程序可以选择更换摄像头和麦克风...

I hope that my application has the option to change the camera and the microphone...

推荐答案

使用 deviceId 约束.我已经更新了 MDN 提到它.

Use the deviceId constraint. I've updated MDN to mention it.

$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 关键字来防止回退到不同的设备，因为这是一个选择器.

Use the exact keyword to prevent fallback to a different device, since this is a selector.

您可以忽略 "audiooutput"，因为它们是扬声器，而不是麦克风.也没有 "videooutput" 这样的东西.这是一个无效的值.我想这些将是显示，但那些没有被 enumerateDevices() 枚举.

You can ignore "audiooutput", as those are speakers, not mics. There's also no such thing as "videooutput". That's an invalid value. Those would be displays I suppose, but those are not enumerated by enumerateDevices().

以上仅用于说明，以展示 API 的工作原理.由于我们正在处理硬件，因此制作一个健壮的选择器是留给读者的练习.

The above is for illustration only, to show how the APIs work. Since we're dealing with hardware, making a robust selector is an exercise left to the reader.

例如:大多数手机只能同时打开一个摄像头.例如，还可能存在其他冲突，例如使用来自使用中的相机以外的相机的麦克风.比较 device.groupId 属性以了解摄像头和麦克风是否在同一硬件上.如果它们匹配，例如，同时更换摄像头和麦克风可能会更好.

For example: Most phones only handle one camera open at the same time. There may also be other conflicts like having a mic from a camera other than the camera in use, for example. Compare device.groupId properties to learn if a camera and a microphone are on the same hardware. If they match, it might work better to change camera and mic in tandem, for instance.

如果您怀疑硬件问题，请尝试WebRTC 示例演示 在您的系统上.

If you suspect hardware issues, try the WebRTC samples demo on your system.

这篇关于使用WebRTC如何选择麦克风和摄像头?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！