访问多个摄像头的JavaScript getusermedia

问题描述：

家伙，我有两个摄像头就是
-the网络摄像头
-the笔记本电脑摄像头
访问多个摄像头的JavaScript getusermedia

我要流的摄像机网站
我已经有一定的参考
这里是一些代码，正在开发的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小提琴

你可以参考这个问题 - [启用后置摄像头与HTML5]（http://*.com/questions/18625007/enable-rear-camera-with-html5） – yushulx

答

你不能同时访问两台摄像机。该API会指出，但潜在的东西似乎阻止它按预期工作。您可以通过在两个完全独立的窗口中打开https://simpl.info/getusermedia/sources/或http://googlechrome.github.io/webrtc/samples/web/content/getusermedia-source/来验证这一点，尽管可以选择两个流只能同时激活一个流 - 如果您在两个窗口中选择相同的一个，则它会在两个位置显示。我能做的唯一解决方法是在两个流之间翻转，然后将视频拖到画布上。这样做，我能够以大约1fps的速度拍摄，不幸的是相机会在相框之间复位，在我的一台相机中，我必须延迟一段时间才能让自动白平衡获得一个像样的图像。

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

答

现在，它的工作原理（在Chrome 41中试用过）！

我使用的是Chrome 48，我无法同时访问两台摄像机。你能指出你是如何工作的吗？ – Brad

答

如果多台摄像机位于不同的USB总线上，我可以使用多台摄像机。如果他们在同一个USB总线上，他们不会同时为我工作。

访问多个摄像头的JavaScript getusermedia

相关推荐