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

Question

我们有一台笔记本电脑，配有一个内置网络摄像头和两个外部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个摄像头的设备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。有关更多信息，请阅读官方的WebRTC文档。