Is it possible to embed two webcam streams on one Html page from one or more cameras.

问题

Im trying to Embed two webcam streams on one HTML page.

I am use to a get user media script that I got from this site https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm

It works fine for one steam but when I try to make two different video streams on the same page it doesn't work.

I have tried making a div tag with a grid in it and putting one video element in each cell. This results in only one stream.

Here is my most recent try

<!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>

I appreciate any help. Thank you.

回答1:

You tell a video element which stream to play by setting its src property.

Basically you need to duplicate all the code supporting videoElement here, not just its creation.

One problem you'll run into is that many browsers frown on calling getUserMedia twice at the same time (before the previous asynchronous call has completed), because this overwhelms users with multiple prompts at once. To work around this, put the second call to getUserMedia inside handleVideo, to only bother the user with one prompt at a time.

The third problem you'll run into, is that only Firefox has built-in device selection in the permission prompt, so on Chrome you'll get the same camera twice.

To make this work on other browsers you'll need enumerateDevices. I've answered that before.

Lastly, most smart phones are hardware limited and can't run both cameras at once.

来源：https://stackoverflow.com/questions/35709979/is-it-possible-to-embed-two-webcam-streams-on-one-html-page-from-one-or-more-cam

标签

javascript

html

html5

getusermedia