Browser auto-block getUserMedia function

StackOverflow https://stackoverflow.com/questions/18775557

Question

I'm trying to take video and audio from my webcam using getMedia(), but my browser always block the function. I'm using Google Chrome, and this icon appears near Favorite Icon: http://puu.sh/4pLAk.png

The JS is an example of MDN: https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia

HTML:

    <!DOCTYPE html>
    <html>
    <body>
     <button onClick="getMedia()">Ok</button>
    <body>
    <html>

JS:

function getMedia()
{
    navigator.getMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);

navigator.getMedia (

   // constraints
   {
      video: true,
      audio: true
   },

   // successCallback
   function(localMediaStream) {
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(localMediaStream);
      video.onloadedmetadata = function(e) {
         // Do something with the video here.
      };
   },

   // errorCallback
   function(err) {
    console.log("The following error occured: " + err);
   }

);
}

What I'm doing wrong?

Was it helpful?

Solution

When prompted for camera or mic access and you hit the "Deny" button, Chrome will save that choice on future calls to getUserMedia on that site. Yo'll want to click on the video icon that you mentioned and change the permissions to allow camera and/or mic access. See this page for an example of what this looks like.

OTHER TIPS

I encountered similar problem, but related to microphone access. As tom vLine answered, Chrome blocks device access if you serve your file via file://(note that on Microsoft Edge and Firefox it worked via file:://). One solution i've found for Chrome:

  1. open chrome an type in the URL chrome://version/
  2. copy the value of "Command Line" field in your command line and append --allow-file-access-from-files and run it
  3. after Chrome opened and enter your file:// url.

For starting Chrome always like that, right click on Chrome icon, and then click on properties. In the Shortcut tab append to the Target value all the command line parameters from 2.

Hope this helped someone :-)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top