访问多个摄像头 javascript getusermedia

Question

伙计们，我有两个相机
-网络摄像头
- 笔记本电脑摄像头

我想在网站上流式传输这些相机
我已经有一些参考
这是一些在 jsfiddle 上工作的代码 here

<video id="video" width="640" height="480" autoplay></video>
<button id="snap" class="sexyButton">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

<script>

    // Put event listeners into place
    window.addEventListener("DOMContentLoaded", function() {
        // Grab elements, create settings, etc.
        var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d"),
            video = document.getElementById("video"),
            videoObj = { "video": true },
            errBack = function(error) {
                console.log("Video capture error: ", error.code); 
            };

        // Put video listeners into place
        if(navigator.getUserMedia) { // Standard
            navigator.getUserMedia(videoObj, function(stream) {
                video.src = stream;
                video.play();
            }, errBack);
        } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
            navigator.webkitGetUserMedia(videoObj, function(stream){
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
            }, errBack);
        } else if(navigator.mozGetUserMedia) { // WebKit-prefixed
            navigator.mozGetUserMedia(videoObj, function(stream){
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }, errBack);
        }

        // Trigger photo take
        document.getElementById("snap").addEventListener("click", function() {
            context.drawImage(video, 0, 0, 640, 480);
        });
    }, false);

</script>

该示例只能连接和选择 1 个摄像头
我想选择并查看我的两个相机，有什么建议或解决方案吗？
你也可以给我JS小提琴

Answer 1

您可以创建两个不同的流，每个摄像头一个，并在两个<video> 标记中同时显示它们。

可使用navigator.mediaDevices.enumerateDevices() 获得可用设备列表。过滤结果列表后仅包含videoinputs，您无需用户许可即可访问deviceIds。

使用getUserMedia，您可以使用 ID 为 camera1Id 的摄像头请求流

navigator.mediaDevices.getUserMedia({
  video: {
    deviceId: { exact: camera1Id }
  }
});

生成的stream 可以通过调用vid.srcObject = stream 输入到<video>（此处由vid 引用）。

我同时对来自两个网络摄像头的两个流进行了此操作。

Answer 2

您不能同时访问两个摄像头。 API 会另外指出，但底层的某些东西似乎阻止它按预期工作。您可以通过在两个完全独立的窗口中打开 https://simpl.info/getusermedia/sources/ 或 http://googlechrome.github.io/webrtc/samples/web/content/getusermedia-source/ 来验证这一点，尽管可以选择两个流，但一次只有一个处于活动状态 - 如果您在两个窗口中选择相同的一个，则它会显示在两个位置。 我能做的唯一解决方法是在两个流之间切换，然后将视频绘制到画布上。这样做我能够以大约 1 fps 的速度进行捕捉，不幸的是相机在帧之间重置，在我的一个相机上我不得不延迟以允许自动白平衡启动以获得像样的图像。

function webcam() {
if (!navigator.getUserMedia) {
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
}

if (!navigator.getUserMedia) {
    return alert('getUserMedia not supported in this browser.');
}

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var audioSource;
var cw = Math.floor(canvas.clientWidth / 2);
var ch = Math.floor(canvas.clientHeight/2);
//canvas.width = cw;
//canvas.height = ch;

//off dom video player
var video = document.createElement("video");
video.autoplay="autoplay";
video.addEventListener('playing', function(){
    //delay for settling...
    setTimeout(draw,1000,this,context,(currentSource*canvas.clientWidth/2),cw,ch);
},false);

function captureVideo() {
    console.log("Capturing " + currentSource,videosources[currentSource]);
    var mediaOptions = {
        audio: {
            optional: [{sourceId: audioSource}]
        },
        video: {
            optional: [
                {sourceId: videosources[currentSource].id}
            ]
        }};
    navigator.getUserMedia(mediaOptions, success, errorCallback);
}
var currentSource=0;
var videosources = [];
var lastStream;
function errorCallback(error){
    console.log("navigator.getUserMedia error: ", error);
}
function success(stream) {

    console.log("the stream" + currentSource,stream);
    video.src = window.URL.createObjectURL(stream);
    video.play();
    lastStream=stream;
}
function next(){

    if(lastStream){
        lastStream.stop();
    }
    video.src = "";
    if(currentSource < videosources.length-1){
        currentSource+=1;
    }
    else
    {
        currentSource=0;
    }
    captureVideo();
}
function draw(v,c,l,w,h) {
    if(v.paused || v.ended) return false;
    console.log("drawing",l)
    c.drawImage(v,l,0,w,h);
    setTimeout(next,500);
}

MediaStreamTrack.getSources(function (sourceInfos) {

    for (var i = 0; i != sourceInfos.length; ++i) {
        var sourceInfo = sourceInfos[i];
        if (sourceInfo.kind === 'audio') {
            console.log(sourceInfo.id, sourceInfo.label || 'microphone');
            audioSource=sourceInfo.id;

        } else if (sourceInfo.kind === 'video') {
            console.log(sourceInfo.id, sourceInfo.facing, sourceInfo.label || 'camera');
            videosources.push(sourceInfo);

        } else {
            console.log('Some other kind of source: ', sourceInfo);
        }
    }
console.log("sources",videosources)
    next();
});
}