是否可以从一个或多个摄像头在一个 Html 页面上嵌入两个网络摄像头流。答案

【问题标题】：Is it possible to embed two webcam streams on one Html page from one or more cameras.是否可以从一个或多个摄像头在一个 Html 页面上嵌入两个网络摄像头流。
【发布时间】：2016-02-29 21:26:31
【问题描述】：

我试图在一个 HTML 页面上嵌入两个网络摄像头流。

我习惯于从该站点https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm获取用户媒体脚本

它适用于一个蒸汽，但当我尝试在同一页面上制作两个不同的视频流时它不起作用。

我尝试制作一个带有网格的 div 标签，并在每个单元格中放置一个视频元素。这只会产生一个流。

这是我最近的尝试

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta content="stuff, to, help, search, engines, not" name="keywords">
  <meta content="What this page is about." name="description">
  <meta content="Display Webcam Stream" name="title">
  <title>Display Webcam Stream</title>
  
  <style>
    #container {
      margin: 0px auto;
      width: 500px;
      height: 375px;
      border: 10px #333 solid;
    }
    #videoElement {
      width: 500px;
      height: 375px;
      background-color: #666;
    }
    #container2 {
      margin: 0px auto;
      width: 500px;
      height: 375px;
      border: 10px #333 solid;
    }
    #videoElement2 {
      width: 500px;
      height: 375px;
      background-color: #666;
    }
  </style>
</head>

<body style="">
  <div id="container">
    
    <video autoplay id="videoElement">
      
    </video>
  </div>

  <div id="container2">
    
    <video2 autoplay="true" id="videoElement2">
      
    </video2>
  </div>

  <script>
    var video = document.querySelector("#videoElement");

     
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia; 
    if (navigator.getUserMedia) {          
      navigator.getUserMedia({
        video: true
      }, handleVideo, videoError);
    } 

    function handleVideo(stream) {    
      video.src = window.URL.createObjectURL(stream);
    } 

    function videoError(e) {     // do something
    }
  </script>
</body>

</html>

感谢您的帮助。谢谢。

【问题讨论】：

您的脚本引用了videoElement，但没有引用videoElement2...
我并不是说你不能，但如果你能的话，这对我来说将是新闻并且有点令人惊讶。上次我听说，您几乎无法选择一台或另一台相机......
@jball 我该如何纠正这个问题？
第二个摄像头怎么选？
@SebastiánEspinosa 必须附加一个。当浏览器要求您访问相机时，会出现一个下拉菜单，您可以在其中选择相机。它最适合 Firefox。

标签： javascript html getusermedia

【解决方案1】：

您可以通过设置src 属性来告诉video 元素播放哪个stream。

基本上你需要在这里复制所有支持videoElement的代码，而不仅仅是它的创建。

您会遇到的一个问题是，许多浏览器不赞成同时调用两次getUserMedia（在上一个异步调用完成之前），因为这会使用户同时收到多个提示。要解决此问题，请将第二次调用 getUserMedia 放在 handleVideo 中，以便一次只用一个提示来打扰用户。

您将遇到的第三个问题是，只有 Firefox 在权限提示中具有内置设备选择功能，因此在 Chrome 上您将获得两次相同的相机。

要在其他浏览器上使用此功能，您需要 enumerateDevices。我有answered that before。

最后，大多数智能手机都受硬件限制，不能同时运行两个摄像头。

【讨论】：