webrtc getUserMedia javascript code

var video = document.querySelector("video");
var constraints = {audio: false, video: true};
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||     navigator.mozGetUserMedia;

function successCallback(stream) 
{
  window.stream = stream; // stream available to console
  if (window.URL) 
    {
         video.src = window.URL.createObjectURL(stream);
    } else 
    {
         video.src = stream;
    }
}

function errorCallback(error)
{
    console.log("navigator.getUserMedia error: ", error);
}

navigator.getUserMedia(constraints, successCallback, errorCallback);

Hi I am working on webrtc example code of getUserMedia and getting an error: Uncaught TypeError: Cannot set property 'src' of null

I looked into the inspect element and found the

video.src

is turning out to be 'null' while

window.URL.createObjectURL(stream)

does have value of "blob:http%3A//danielle/738c6a8e-c887-4bd2-8b3d-3e3a18e6ac1f"

I can see an object in 'stream' object as well.

I don't know why it's not passing that value to video.src

Can anyone see any reason in code?

I got this code from http://googlechrome.github.io/webrtc/samples/web/content/getusermedia/

I actually copied exactly the same code from that link.

Here is my HTML code

<html>
<head>
<base target="_blank">
<title>getUserMedia</title>
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<div id="container">
    <video controls style="border: 1px solid rgb(14, 168, 234); width: 90%;"></video>
</div>
</body>
</html>

Solution

Couple of things

HTML is read from the TOP DOWN. So, you very well may have a video element declared but it is only found after reading and executing the script. So, either move your script execution after your video element or move your video element.
Also, you may want to set your video element to autoplay. You COULD keep it they way it is but you will have to play it manually on the page(using the given controls) or play it manually in the JS.

Here are my suggested changes that work:

<html>
<head>
<base target="_blank">
<title>getUserMedia</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container">
    <video controls style="border: 1px solid rgb(14, 168, 234); width: 90%;" autoplay></video>
</div>
<script src="main.js"></script>
</body>
</html>