webrtc getUserMedia javascript code

Question

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>

Answer 1

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>

Answer 2

谷歌浏览器会阻止 http 中的视频和音频设备访问，因此请确保您使用的是 https 协议，然后您将获得 navigator.getUserMedia() 工作

Answer 3

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.

webrtc getUserMedia javascript code

Question

3 answers

solution1
3 ACCPTED 2014-07-15 12:58:27

solution2
1 2019-12-17 18:46:07

solution3
0 2014-07-14 13:52:16

webrtc getUserMedia javascript code

Question

3 answers

solution1 3 ACCPTED 2014-07-15 12:58:27

solution2 1 2019-12-17 18:46:07

solution3 0 2014-07-14 13:52:16

solution1
3 ACCPTED 2014-07-15 12:58:27

solution2
1 2019-12-17 18:46:07

solution3
0 2014-07-14 13:52:16