访问多个摄像头javascript getusermedia [英] Accessing Multiple camera javascript getusermedia

问题描述

我有两台相机，我们需要两台相机 - 网络相机

- 笔记本电脑相机

我想在网站中流式传输这些相机

i已经有一些参考

这里有一些代码正在jsfiddle工作
这里

  < video id =videowidth =640height =480autoplay>< / video> 
< button id =snapclass =sexyButton> Snap Photo< / button> 
< canvas id =canvaswidth =640height =480>< / canvas> 
 
< script> 
 
 //将事件监听器放到位
 window.addEventListener（DOMContentLoaded，function（）{
 //抓取元素，创建设置等
 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）; 
}; 
 
 //将视频监听器放到位
 if（navigator.getUserMedia）{//标准
 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.webkit URL.createObjectURL（流）; 
 video.play（）; 
}，errBack）; 
} else if（navigator.mozGetUserMedia）{// WebKit-prefixed 
 navigator.mozGetUserMedia（videoObj，function（stream）{
 video.src = window.URL.createObjectURL（stream）; 
 video.play（）; 
}，errBack）; 
} 
 
 //触发照片取
 document.getElementById（snap）。addEventListener（click，function（）{
 context.drawImage（video ，0,0,640,480）; 
}）; 
}，false）; 
 
< / script> 
  

该示例只能连接并选择1个摄像头

i想要选择和查看我的两个相机，任何建议或解决方案的家伙？

你也可以给我JS小提琴

解决方案

您可以创建两个不同的流，每个相机一个，并在两个< video> 标签中同时显示它们。

可使用 navigator.mediaDevices.enumerateDevices（） 。在仅为 videoinput 过滤结果列表后，您无需用户的许可即可访问 deviceId 。

getUserMedia 然后您可以使用

从ID camera1Id 的相机请求流

  navigator.mediaDevices.getUserMedia（{
 video：{
 deviceId：{exact：camera1Id} 
} 
}）; 
  

结果流可以输入到通过调用 vid.srcObject = stream << video> （此处由 vid 引用） / code>。

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

guys i have two cameras that is
-the web camera
-the laptop camera

i want to stream those camera in a website
i already have some reference
here is some code that is working on 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>

that example can only connects and select 1 camera
i want to select and view two of my camera, any suggestion or solution guys?
you can also give me the JS fiddle

解决方案

You can create two different streams, one for each camera, and show them simultaneously in two <video> tags.

The list of available devices is available using navigator.mediaDevices.enumerateDevices(). After filtering the resulting list for only videoinputs, you have access to the deviceIds without needing permission from the user.

With getUserMedia you can then request a stream from the camera with id camera1Id using

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

The resulting stream can be fed into a <video> (referenced here by vid) by calling vid.srcObject = stream.

I have done this for two streams from two webcams simultaneously.

这篇关于访问多个摄像头javascript getusermedia的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！