getUserMedia - 无法同时从两个浏览器访问摄像头

Question

我一直在为我的下一个项目尝试使用 webRTC 创建视频聊天，但测试很困难。我有这个简单的代码来访问相机：

        navigator.getUserMedia = navigator.getUserMedia ||
                                 navigator.webkitGetUserMedia ||
                                 navigator.mozGetUserMedia ||
                                 navigator.msGetUserMedia;

        var video = document.querySelector('#av-chat video');

        if (navigator.getUserMedia) {
          navigator.getUserMedia({audio: true, video: true}, function(stream) {
            video.src = window.URL.createObjectURL(stream);
          }, errorCallback);
        }

它在 chrome 和 mozilla 上工作得很好，但是当我尝试一起做时，它不起作用。我所说的一起的意思就像在两个浏览器中使用此代码打开同一个文件。似乎当一个浏览器可以访问相机时，它会阻止其他浏览器访问该相机。

我没有在互联网上看到过这个问题，所以我想知道，只有我这样吗？如果不行有什么解决办法吗？

Answer 1

这是 Windows 上的限制。在 Mac OS 上，您可以同时在多个应用程序中使用同一台相机，但遗憾的是在 Windows 中不行。您在这里有几个选择：

1. 买一台 Mac 😛
2. 在测试时获取第二个 USB 摄像头以在第二个应用程序中使用。
3. 安装一些软件来分割相机或创建虚拟相机。
4. 在 Chrome 或 Firefox（或两者）中使用假设备进行测试（就像 Philipp 建议的那样）。实际上，在 Firefox 中打开假冒设备非常容易，而且它是免费的，因此如果您还没有另一个 USB 摄像头，这可能是最好的选择。
   1. 只需转到网址栏中的

      about:config

   2. 接受警告消息
   3. 添加新的布尔值。您可以通过右键单击并选择“新建”->“布尔值”来完成此操作。
   4. 然后输入

      media.navigator.streams.fake

   5. 选择 true 作为值。 现在，当您使用相机时，您会收到虚假的视频和音频声音。

Answer 2

Chrome 和 Firefox 都有命令行标志，可以通过启用假设备来简化测试。有关 Firefox，请参阅此处，有关 Chrome，请参阅下文。

Answer 3

使用假设备/流可能是最简单的解决方案。

Chorme/Edge

两者都是基于 Chromium 的，因此命令行标志是相同的：

https://webrtc.github.io/webrtc-org/testing/

相关部分如下：

对于手动开发和测试，以下是一些对于 WebRTC 相关测试有用的命令行标志：

• --allow-file-access-from-files

   允许从 

  getUserMedia()

   URL 调用 

  file://

  。

• --disable-gesture-requirement-for-media-playback

   无需点击 

  <video>

   元素即可开始在 Android 上播放。

• --use-fake-ui-for-media-stream

   无需授予摄像头/麦克风权限。

• --use-fake-device-for-media-stream

   将测试模式馈送到 

  getUserMedia()

  ，而不是实时摄像头输入。

• --use-file-for-fake-video-capture=path/to/file.y4m

   将 Y4M 测试文件提供给 

  getUserMedia()

  ，而不是实时摄像头输入。

火狐

导航到

about:config

，在搜索输入框中输入 

media.navigator.streams.fake

，然后双击该标志将值更改为 

true

。

Safari

Safari 允许模拟捕获设备：

https://webkit.org/blog/7763/a-closer-look-into-webrtc/

相关部分如下：

在

Develop

 > 

WebRTC

 菜单中，您可以选择 

Use Mock Capture Devices

 将真实捕获设备的使用替换为模拟捕获设备。该模拟循环 bip-bop AV 流，如下所示。当用作传入流时，模拟的可预测数据可以轻松评估流媒体播放的各个方面，包括同步、延迟和输入设备的选择。