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()获取可用设备列表。在仅为videoinput过滤结果列表后，您无需用户许可即可访问deviceId。

使用getUserMedia，您可以使用

从ID为camera1Id的摄像头请求流

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

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

我已经同时为两个网络摄像头的两个流做了这个。

Answer 2

现在，它有效（在Chrome 41中尝试过）！

Answer 3

如果他们使用不同的USB总线，我可以让多台摄像机工作。如果他们在同一辆公共汽车上，他们将无法同时为我工作。

Answer 4

您无法同时访问两台摄像机。 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();
});
}

访问多个摄像头javascript getusermedia

4 个答案: