访问多摄像头 javascript getusermedia

Question

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

我想流中的网站的相机
，我已经有一定的参考
这里是一些代码，正在研究的jsfiddle 这里

<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筛选结果列表后，您就可以访问deviceId无需用户许可即可s。

随着getUserMedia您可以从相机，然后请求流与IDcamera1Id使用

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

stream可以通过调用将结果送入 a <video>（此处引用为vid）vid.srcObject = stream。

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

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();
});
}