CODEWITHSUNDEEP
javascriptwebrtcsipml
haeminish
haeminish

Reputation: 1078

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>

Upvotes: 2

Views: 11682

Answers (3)

Vikas Kandari
Vikas Kandari

Reputation: 1850

Google chrome blocks video and audio device access in http so make sure you are using https protocol then you will get navigator.getUserMedia() working

Upvotes: 1

Benjamin Trent
Benjamin Trent

Reputation: 7566

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>

Upvotes: 3

gugaiz
gugaiz

Reputation: 534

I am quite sure that you are missing a video tag in you html code, add a line like this

<video controls style="border: 1px solid rgb(14, 168, 234); width: 90%;"></video>

to your HTML code. You can also read https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector#Notes

EDIT:

If you don't want to use jquery ($(document).ready()), wrap your javascript code with this

document.addEventListener("DOMContentLoaded", function() { 
    /*your js code here*/ 
});

You are getting the null error because you are querying for a video tag before the DOM get loaded, so the element does not exist.

Upvotes: 0

Related Questions