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

Question

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.

Your script references `videoElement` but not `videoElement2`... — jball, Feb 29 '16 at 21:30
i'm not not saying you can't, but it would be news and slightly surprising to me if you could. last i heard, you can barely select one camera or the other... — dandavis, Feb 29 '16 at 21:39
@SebastiánEspinosa one has to be attached. when the browser asks you for access to the camera there is a drop down, where you can select the camera. it works best with Firefox. — , Feb 29 '16 at 22:31
@AlexGolshani sorry, im a little confused, are you using 2 cameras or 1 camera locally and getting the other camera via stream from another place? — Sebastián Espinosa, Feb 29 '16 at 22:50
You only call `getUserMedia` once and you never reference `videoElement2`... how do you expect this to work? — jib, Mar 01 '16 at 01:23
@SebastiánEspinosa the other camera is plugged in to the computer via usb. — , Mar 01 '16 at 03:05
@jib It seams like you know what the problem is. Can you explain what I', doing wrong? — , Mar 01 '16 at 03:06

score 1 · Answer 1 · edited May 23 '17 at 12:16

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.

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

1 Answers1

Linked