每个浏览器页面有多个网络摄像头答案

【问题标题】：Multiple webcams per browser page每个浏览器页面有多个网络摄像头
【发布时间】：2020-10-16 19:44:12
【问题描述】：

我们有一台带一个内置网络摄像头和 2 个外部 USB 网络摄像头的笔记本电脑。我想同时接收来自所有三个网络摄像头的图像。我知道自 2018 年以来这是可能的。我正在使用以下代码来处理一台摄像机，但是如何同时显示来自三台摄像机的图像？

<script>
var video = null;
var canvas = null;
var canvasContext = null;
var webimage = null;
var statusLabel = null;

function initVideo() {
    video = document.getElementById("monitor");
    statusLabel = document.getElementById("LBLSTATUS");
    navigator.webkitGetUserMedia({video:true}, gotStream, noStream);
}

function setStatus(aStatus) {
    statusLabel.innerHTML = aStatus;
}

function gotStream(stream) {
    video.onerror = function () {
        stream.stop();
        streamError();
    };
                video.srcObject = stream;
    //video.src = webkitURL.createObjectURL(stream);  -> Deprecated 
}

function noStream() {
    setStatus('No camera available.');
}
 
function streamError() {
    setStatus('Camera error.');
}

 </script>

【问题讨论】：

设置每个摄像头，使其在特定端口上流式传输，然后添加三个 iframe，每个 iframe 都有相应摄像头的 ip 和端口。
这些不是IP摄像头，它们不传输任何流，这些是普通的USB网络摄像头，只需要在用户的浏览器中显示它们的图像。

标签： javascript webrtc webcam getusermedia

【解决方案1】：

您需要获取所有 3 个摄像头设备 ID。一旦你得到这些，对 getUserMedia 进行 3 次调用，每个调用都有各自的相机 ID。

navigator.mediaDevices.getUserMedia({
  video: {
    deviceId:{
      exact: videoSource
    },
  },
}).then(function( video ) {
  const localVidElem = document.getElementById( 'localVideo1' );
  localVidElem.srcObject = video;
})

<video id="localVideo1"></video>

确保您拥有正确的 DeviceID，然后为其分配一个 srcObject。有关这方面的更多信息，请阅读official WebRTC docs。

【讨论】：