0

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>

Can anyone help?

  • 2
    Can you please show us the code you are working with? Having a quick look at their example code on the website, I would say it should work if you use two different variables for "video" maybe "video1" and "video2" for the two different containers, but without seeing what you've tried out so far, I couldn't give you a solution sorry. – Aaron Feb 28 '16 at 05:20
  • Can you please post a sample of what you have tried? I encourage you to take the [tour](http://stackoverflow.com/tour) and to visit the [help center](http://stackoverflow.com/help) for guidance on asking [good questions](http://stackoverflow.com/help/how-to-ask) and providing a [minimal, complete, and verifiable example](http://stackoverflow.com/help/mcve) of your code. – McMath Feb 28 '16 at 05:21
  • are you trying to access the same video source twice? if so be careful because the device might be busy –  Feb 28 '16 at 10:55
  • Hi Aaron, McMath, and joyrex, –  Feb 29 '16 at 06:49
  • Hi Aaron, McMath, and joyrex, Thank you for responding I sorry if my question was no clear enough. Joyrex I am trying to access the same source twice, but I am also open to adding an extra camera if need be. I will try to update the question with the code i have already used. –  Feb 29 '16 at 06:56
  • Hi again, I am able to ad my code to the question. I know there is I specific way to put code in the question, but after many attempts I still don't understand. I s there any way I can do this? –  Feb 29 '16 at 07:11
  • @Aaron the code is now in the question. –  Feb 29 '16 at 21:51
  • @McMath the code is now in the question. –  Feb 29 '16 at 21:51
  • @joyrex the code is now in the question. –  Feb 29 '16 at 21:51
  • Possible duplicate of [Is it possible to embed two webcam streams on one Html page from one or more cameras.](http://stackoverflow.com/questions/35709979/is-it-possible-to-embed-two-webcam-streams-on-one-html-page-from-one-or-more-cam) – jib Mar 07 '16 at 03:17

0 Answers0