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

Question

我们有一台笔记本电脑，带有一个内置网络摄像头和 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>

Answer 1

您需要获取所有 3 个摄像头的 deviceID。获得这些后，请对 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。有关更多信息，请阅读官方 WebRTC 文档。

Answer 2

请您在这里写下一个 html 页面的完整代码，该页面在该页面上显示一个网络摄像头，但带有选择和切换到连接到同一设备的其他网络摄像头的选项？ 我需要整个代码，而不仅仅是其中的一部分，因此我可以将您的代码复制粘贴到记事本上，另存为 html 文件并启动它。

你可以帮我写一下吗？