Firefox: navigator.getUserMedia is not a function

Question

I'm playing with browser and audio.

I'm doing this

        var session = {
          audio: true,
          video: false
        };
        var recordRTC = null;
        navigator.getUserMedia(session, initializeRecorder, onError);

But, using latest FF available I got a javascript error, saying that

navigator.getUserMedia is not a function

I copied this code from this blog post: https://blog.groupbuddies.com/posts/39-tutorial-html-audio-capture-streaming-to-nodejs-no-browser-extensions

And similar on latest Chrome:

Uncaught TypeError: undefined is not a function

But I know that this api is supported from both browser

What am I doing wrong?

Linette

Are you including adapter.js? – Kagoshima

To account for all the unique prefixes for each of the individual browser implementations of getUserMedia. Or you can do it yourself as shown in any of the given answers. – Kagoshima

Answer 1

Navigator.getUserMedia() is deprecated, advised to use MediaDevices.getUserMedia()

async function getMedia(pc) {
  let stream = null;

  try {
    stream = await navigator.mediaDevices.getUserMedia(constraints);
    /* use the stream */
  } catch(err) {
    /* handle the error */
  }
}

Winson

Answer 2

It's not supported unprefixed yet. See http://caniuse.com/#search=getusermedia

You'll need to get the browser-specific prefix and use that. As posted in another answer:

navigator.getUserMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);

This will set navigator.getUserMedia to whatever it detects to be the proper prefixed version.

Sensillum

I accetpted this because identical to the other, but it has been written one minute before. – Linette

Now we have to use navigator.mediaDevices.getUserMedia() because navigator.getUserMedia() is deprecated and will display the same error message: developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia – Reverie

Answer 3

Since navigator.getUserMedia() is deprecated, use this :

navigator.getUserMedia = (
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia
);

if (typeof navigator.mediaDevices.getUserMedia === 'undefined') {
    navigator.getUserMedia({
        audio: true
    }, streamHandler, errorHandler);
} else {
    navigator.mediaDevices.getUserMedia({
        audio: true
    }).then(streamHandler).catch(errorHandler);
}

Marcasite

Answer 4

Check the MDN page, especially the first part of the first example:

navigator.getUserMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);

It's not that well-supported - you'll need browser prefixes.

Quoits

Answer 5

The Problem is

If the current document isn't loaded securely, navigator.mediaDevices will be undefined, and you cannot use getUserMedia(). See Security for more information on this and other security issues related to using getUserMedia()
as given in https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

after searching, I got the solution

try Following steps:

1. Open Chrome browser, Type chrome://flags/#unsafely-treat-insecure-origin-as-secure in the url.

2. Add the path of your host/ local url (ex. localhost/myproject or YOUR_HOSTNAME)

3. Select as Enabled.

4. Relaunch Browser.

Cu

Answer 6

I use navigator.mediaDevices.enumerateDevices() to find connected camera and have this error

navigator.mediaDevices.enumerateDevices() is not a function

when any camera are not connected. I use React to develop front so to solve this create an .env file with `HTTPS=true'. Therefore in browser I can use https protocol to serve project and when the camera is not connected I have not any error.

Scrawl