Chrome: navigator.mediaDevices.getUserMedia is not a function

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);
            ...
});

@Tom Serving over localhost is specifically allowed: https://www.chromium.org/Home/chromium-security/deprecating-powerful-features-on-insecure-origins — Nateowami, Sep 22 '16 at 10:16

score 10 · Answer 1 · edited Sep 04 '17 at 12:08

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.

score 8 · Answer 2 · answered Jun 23 '16 at 12:22

8

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

Worked for me in chromium

answered Jun 23 '16 at 12:22

Simon Malone

334
1
11

Worked for me as well. Is `navigator.mediaDevices.getUserMedia` defined in Chrome but not Chromium? MDN [warns against using](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia) the deprecated `navigator.getUserMedia`, warning that "it may break at any time." I'm trying not to use it, but `navigator.mediaDevices.getUserMedia` isn't available in Chromium without changing that flag. EDIT: Contrary to what I read, it [didn't come out until Chrome 53](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) (I'm using Chromium 52). – Nateowami Sep 22 '16 at 10:40
1

I found the answer in the footnotes on MDN: `From version 47 to 52, the promise-based interface was only available through the adapter.js polyfill, or using the flag chrome://flags/#enable-experimental-web-platform-features. Starting with version 53, the promise-based interface is on by default, though that interface is still not available through navigator.` – Nateowami Sep 22 '16 at 11:11
I'm using Version 71.0.3578.98 (Official Build) (64-bit), and `#enable-experimental-web-platform-features` has not helped me with using Twilio: https://github.com/TwilioDevEd/client-quickstart-js/blob/7f069897320d063fdadb1819a36d8b72b16e4923/public/quickstart.js. – Ryan Feb 08 '19 at 16:00
Darn. I'm back again and didn't read my comment above and tried again in Brave (`Brave is up to date Version 1.22.71 Chromium: 89.0.4389.114 (Official Build) (64-bit)`) and it still didn't work. – Ryan Apr 09 '21 at 15:16

score 7 · Answer 3 · answered May 09 '20 at 01:48

I too had the same problem in my chrome browser. first check your phone is supported by testing it in https://test.webrtc.org/

if your phone passes all the cases, then check step 2

step 2: If your hosting a webpage or running a third party webpage,see whether camera permissions are enabled on your phone.

Also the main issue is WEBRTC is not supported in HTTP site and it is supported only in HTTPS site

This is the https site which allows web This is the http site which gives a error

Exactly, that was my problem too (+1) – Tiago Martins Peres May 24 '20 at 13:33 — Tiago Martins Peres, May 24 '20 at 13:33

score 1 · Answer 4 · answered Apr 28 '20 at 19:00

1

I got stuck in the same issue. One solution is to follow and download the extension Web Server for Chrome shared in the comment above by @ellerynz, or

if you have python installed you could also do

python -m SimpleHTTPServer [port]

After you hit enter, you should see the following message:

Serving HTTP on 0.0.0.0 port 8000 ...

Open the browser and put

http://127.0.0.1:[port]

answered Apr 28 '20 at 19:00

brijesh-pant

967
1
8
16

Excellent - ran exactly into this using `SimpleHTTPServer`; changing IP from 0.0.0.0 to 127.0.0.1 solved it – 0__ Jan 01 '21 at 16:08

score 0 · Answer 5 · answered Jul 13 '16 at 17:46

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.

score 0 · Answer 6 · answered Jul 18 '16 at 04:02

0

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.

answered Jul 18 '16 at 04:02

ellerynz

241
2
6

score -2 · Answer 7 · answered May 19 '16 at 07:33

-2

Use navigator.getUserMedia() instead.

navigator.getUserMedia(constraints, successCallback, errorCallback);

answered May 19 '16 at 07:33

Adrian Ber

20,474
12
67
117

1

I was hoping to use MediaDevices.getUserMedia because Navigator.getUserMedia is listed as deprecated on Mozilla. I'm still confused why the former does not work for me. – kybak May 19 '16 at 17:28
1

You can use the one you want, but you'll have to write some kind of polyfill. – Adrian Ber May 19 '16 at 19:05

Chrome: navigator.mediaDevices.getUserMedia is not a function

7 Answers7

Linked