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 /
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>
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>
- Do you have a html element named video that is an HTLM5 video tag? – Benjamin Trent Commented Jul 14, 2014 at 12:55
- I did and I can see the video which doesn't just play anything.. – haeminish Commented Jul 15, 2014 at 0:35
- set your video html element to autoplay :) – Benjamin Trent Commented Jul 15, 2014 at 12:50
3 Answers
Reset to default 3Couple 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>
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
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/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.