shman613
shman613

Reputation: 238

How to use HTMLMediaElement.srcObject = stream

I've been scouring the web and S/O for answers as to why the following code does not work, but so far no dice. It is supposed to simply stream the user's video and audio. I am viewing it in Chrome.

<html>
<body>
  <video width="400" height="400" id="userVideo"></video>
<script>
var userStream;
if(navigator.mediaDevices.getUserMedia) {
                //both video and audio
                  navigator.mediaDevices.getUserMedia({
                    video: true,
                    audio: true,
                  }, function(stream) {
                      console.log("got the stream");
                      userStream = stream;

                      document.getElementById("userVideo").srcObject = userStream;

                  });
              }
</script>
</body>
</html>

Upvotes: 0

Views: 11105

Answers (3)

tonyxforce
tonyxforce

Reputation: 35

try adding autoplay="true" in the video tag

Upvotes: 3

shman613
shman613

Reputation: 238

Ok, so the issue -- figured out with some fiddling from the example here (https://webrtc.github.io/samples/src/content/getusermedia/gum/) -- is that I had to put an autoplay attribute in the html video tag.

Upvotes: 2

Doug Sillars
Doug Sillars

Reputation: 1765

give this a go:

var userStream;
if(navigator.mediaDevices.getUserMedia) {
   navigator.mediaDevices.getUserMedia({audio: true, video:true}).then(function(stream) {
          console.log("got the stream");
                      userStream = stream;

                 document.getElementById("userVideo").srcObject = userStream;

          });
              }

this one runs for me in Chrome

Upvotes: 0

Related Questions