使用 getUserMedia 从多个网络摄像头捕获视频答案

【问题标题】：Capture video from several webcams with getUserMedia使用 getUserMedia 从多个网络摄像头捕获视频
【发布时间】：2014-01-17 09:40:24
【问题描述】：

我想从连接到我的电脑的多个网络摄像头捕捉视频。使用一个网络摄像头很容易，但是如何从多个来源获取视频流？是否可以选择用于一个流的摄像机？

     navigator.getUserMedia ({
         video: true 
     }, function (oMedia) {
         var video = document.getElementById ('tVideo1'); 
         video.src = window.URL.createObjectURL (oMedia); 
     });

【问题讨论】：

标签： javascript html webcam getusermedia

【解决方案1】：

我对你的问题很感兴趣，所以我开始研究“getusermedia 多摄像头”。

几个小时后，当我几乎要放弃时，我遇到了this google group discussion。

我回顾了您的问题，看看您的目标是应该同时出现来自所有网络摄像头的流，还是您想向用户提供选择摄像头供稿的选项。您似乎希望用户选择提要。如果是后一种情况，那么在上面的链接中，Vikas（在他 8/15/2013 的消息中）描述了一种实现此目的的方法。您需要启用 WebRTC 枚举源标志，然后使用 MediaStreamTrack.getSources 获取所有源并将 sourceId 传递给 getUserMedia 例如 navigator.getUserMedia({ "video": {optional: [{sourceId: "---YOUR ID HERE- --"}]}}, 有趣, errfun);.似乎其中一位用户能够使其成功运行。

Here's the sourcecode 我看到了。此信息将特定于 Chrome canary 或 Firefox。我只是想我会分享它，以防你还没有遇到这个，这可能会对你有所帮助。我已经实现了一个应用程序，其中多个网络摄像头在一个屏幕上提供，但它更简单，因为它是一个桌面应用程序。

【讨论】：

【解决方案2】：

您将需要使用 getSources API，恐怕它的支持不太好。我认为Chrome has a version of it 可用隐藏在配置标志后面，但除此之外，除了等待之外你无能为力。

不是你想听到的答案我知道，对不起。

【讨论】：

【解决方案3】：

您可以使用弹出窗口同时捕捉多个视频流。我只有一个相机，所以我无法测试这个解决方案。在 Chrome 中，我假设用户可以单击每个子窗口地址栏中的相机图标来选择独立的源。 Firefox 在请求使用设备的权限时会询问您使用哪个摄像头，因此它甚至可以使用 iframe 代替 Firefox 的弹出窗口。

【讨论】：