webrtc getUserMedia javascript code

11,538

Solution 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>

Solution 2

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

Share:
11,538
haeminish
Author by

haeminish

Frontend dev

Updated on July 27, 2022

Comments

  • haeminish
    haeminish over 1 year
    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>