每个浏览器页面多个摄像头

问题描述

我们有一台带有一个内置网络摄像头和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>

解决方法

您需要获取所有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。有关更多信息，请阅读official WebRTC docs。