访问多个摄像头 javascript getusermedia

Posted 2023-03-04

【中文标题】访问多个摄像头 javascript getusermedia

【英文标题】：Accessing Multiple camera javascript getusermedia

【发布时间】：2021-01-23 23:31:58

【问题描述】：

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

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

<video id="video"   autoplay></video>
<button id="snap" class="sexyButton">Snap Photo</button>
<canvas id="canvas"  ></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小提琴

【问题讨论】：

可以参考这个问题-Enable rear camera with html5

【参考方案1】：

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

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

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

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

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

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

【讨论】：

无法在 android 前后摄像头上使用 Chrome

@astronought。确定设备实际上可以在本地执行此操作？

@J0hj0h navigator.mediaDevices.enumerateDevices() 无法在我的笔记本电脑中检测到两个网络摄像头。它只检测[音频输入、视频输入、音频输出]。我有两个视频输入，但它无法访问另一个。我在 windows 中使用最新版本的 chrome。

【参考方案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();
);

【讨论】：

截至2018年，链接网站正常工作，可同时显示多个视频流。

更正：视频流可以同时显示在两个标签或窗口中，只要它们属于同一个浏览器。如果 Firefox 打开了一个流，那么 Chrome 就会失败，反之亦然，但是当使用相同的浏览器时，一切正常。