Chrome: navigator.mediaDevices.getUserMedia is not

Question

I'm on localhost and trying to use the MediaDevices.getUserMedia method in Chrome. I receive the error as titled. I understand that in Chrome it is only possible to use this function with a secure origin and that localhost is considered a secure origin. Also, this works in Firefox.

This is how I'm using it as shown on the Google Developers website https://developers.google.com/web/updates/2015/10/media-devices?hl=en:

var constraints = window.constraints = {
            audio: false,
            video: true
};


navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
            callFactory.broadcastAssembly(stream);
            ...
});

Answer 1

Have you tried to include adapter.js polyfill ? Check this page : https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Browser_compatibility

It looks like this or enabling chrome://flags/#enable-experimental-web-platform-features as per @Simon Malone's note, is needed for Chrome.

Answer 2

On some latest browsers navigator.getUserMedia does not perform well. So, try using navigator.mediaDevices.getUserMedia. Or, better you check if navigator.mediaDevices.getUserMedia is available for the browser use navigator.mediaDevices.getUserMedia or else use navigator.getUserMedia.

navigator.getWebcam = (navigator.getUserMedia || navigator.webKitGetUserMedia || navigator.moxGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
if (navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({  audio: true, video: true })
    .then(function (stream) {
                  //Display the video stream in the video object
     })
     .catch(function (e) { logError(e.name + ": " + e.message); });
}
else {
navigator.getWebcam({ audio: true, video: true }, 
     function (stream) {
             //Display the video stream in the video object
     }, 
     function () { logError("Web cam is not accessible."); });
}

Hope this will solve your problem.

Answer 3

Try enabling: chrome://flags/#enable-experimental-web-platform-features

Worked for me in chromium

Answer 4

Use navigator.getUserMedia() instead.

navigator.getUserMedia(constraints, successCallback, errorCallback);

Answer 5

I was having this problem too and changing flags didn't seem to work. I came across this chrome extension — Web Server for Chrome in Google's WebRTC tutorial which seemed to do the trick.