how to make getUserMedia() work on all browsers

Question

I learn about web-rtc, it says that you can capture video-cam , i used demo , well this worked on chrome only..

when i open it on firefox i get message "getUserMedia() not supported in your browser." on another hand when i open this HTML5-rocks-demo

it worked 100%. what changes or plugins or something i miss that let getusermedia() works.

To get this to work in IE and Safari, there are plugins, I haven't tried any of them, e.g. OpenWebRTC (sounds suboptimal but good for testing). An alternative if you only want to capture a single picture or video from the stream there is a description here, how to do it: http://stackoverflow.com/questions/12811361/using-getusermedia-stream-api-with-ios-6 This would need some kind of browser-sensitive page handling. — Ron Wertlen, Apr 29 '15 at 13:05
FYI There is now a single function you can use: `navigator.mediaDevices.getUserMedia()` as per [the specs](https://w3c.github.io/mediacapture-main/getusermedia.html#legacy-interface-extensions): *The official definition for the getUserMedia() method, and the one which developers are encouraged to use, is now at MediaDevices.* — Andrew, Jan 14 '19 at 22:00

score 29 · Answer 1 · answered Jan 09 '14 at 14:49

The issue is not just the prefixed function name; the stream provided works differently in different browsers. Here, I'll walk you through it.

I assume you've already set up a video element in the variable called video.

//I don't usually like to overwrite publicly accessible variables, but that's just me
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var cameraStream;

getUserMedia.call(navigator, {
    video: true,
    audio: true //optional
}, function (stream) {
    /*
    Here's where you handle the stream differently. Chrome needs to convert the stream
    to an object URL, but Firefox's stream already is one.
    */
    if (window.webkitURL) {
        video.src = window.webkitURL.createObjectURL(stream);
    } else {
        video.src = stream;
    }

    //save it for later
    cameraStream = stream;

    video.play();
});

This should cover you for Firefox, Chrome and Opera. IE and Safari don't support it yet.

Another potentially annoying thing to be aware of is how to turn off the camera if you want to stop using it before leaving the web page. Use this function:

function stopWebCam() {
    if (video) {
        video.pause();
        video.src = '';
        video.load();
    }

    if (cameraStream && cameraStream.stop) {
        cameraStream.stop();
    }
    stream = null;
}

Here is a chart showing browser support for this: http://caniuse.com/#feat=stream — Andy Stannard, Oct 29 '14 at 11:25
I'm playing with this in Chrome console, and it only works if I provide a third parameter (the error callback) to the `getUserMedia` call. — Brilliand, Feb 06 '15 at 20:43
Are there any updates to this answer? I read that we need to now use `navigator.mediaDevices.getUserMedia`. — navigator, Mar 30 '16 at 06:34
@navigator Yea, Firefox was navigator.mozGetUserMedia and now is navigator.mediaDevices.getUserMedia — Randy, Sep 15 '16 at 06:25
Just a update to you all guys, don't use ``video.src = window.webkitURL.createObjectURL(stream); `` because it will give you error now, you can include direct stream like this ``video.src = stream;`` have a look here for more info https://stackoverflow.com/a/33759534/6110557 — rohitcoder, Jul 20 '20 at 07:43

score 14 · Answer 2 · answered Sep 26 '17 at 12:32

14

Since Safari 11 is out, this works everywhere (tested on recent versions of Chrome, Firefox and Safari 11):

var constraints = {audio: false, video: true};
var video = document.querySelector("video");

function successCallback(stream) {
  video.srcObject = stream;
  video.play();
}

function errorCallback(error) {
  console.log("navigator.getUserMedia error: ", error);
}

navigator.mediaDevices.getUserMedia(constraints)
  .then(successCallback)
  .catch(errorCallback);

answered Sep 26 '17 at 12:32

Johnny Oin

557
5
16

This worked for me where `navigator.getUserMedia(constraints, successCallback, errorCallback);` failed on safari. Promise chains are nicer too. – 4imble Feb 28 '20 at 13:25

score 9 · Answer 3 · edited Aug 26 '16 at 12:05

9

Fiddles

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

var constraints = {audio: false, video: true};
var video = document.querySelector("video");

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

edited Aug 26 '16 at 12:05

opyate

5,388
1
37
64

answered Jan 14 '14 at 09:48

Muath

4,351
12
42
69

5

In Safari all three of these are undefined: `navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;` – Ron Wertlen Apr 29 '15 at 13:11
@RonWertlen i didn't check it on safari , but it worked fine on chrome & firefox, make sure you got latest version of safari,. – Muath Apr 29 '15 at 14:02
@RonWertlen Safari doesn't support it yet. – Bilbo Baggins Jan 18 '17 at 09:11

score 2 · Answer 4 · edited Apr 06 '16 at 05:51

2

getUserMedia needs to be prefixed with webkit- or moz-. The first example is only prefixed with webkit-. Therefor it will never work on Firexox, only Chrome and Safari.

The code example does not show the prefix...

Prefixing can be done in this way:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

edited Apr 06 '16 at 05:51

Aleksander Azizi

9,829
9
59
87

answered Jan 09 '14 at 13:31

Mikael Holmgren

2,466
1
18
27

You could check how the other example have solved it. (Updated answer) – Mikael Holmgren Jan 09 '14 at 14:20
1

I have an example at http://simpl.info/gum that works in Firefox, Chrome and Opera. – Sam Dutton Jan 10 '14 at 15:59

score 2 · Answer 5 · answered Jan 20 '21 at 12:00

2

January 2021 - navigate.getUserMedia has been replaced with navigate.mediaDevices.getUserMedia

answered Jan 20 '21 at 12:00

Wide Awake

1,339
1
11
18

score 1 · Answer 6 · answered May 10 '20 at 09:20

1

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

In addition, you have to use https instead of http, otherwise Safari for iPadOS won't work.

answered May 10 '20 at 09:20

webcpu

3,174
2
24
17

score 0 · Answer 7 · answered Oct 01 '21 at 12:43

I know is pain full sometimes. specially in Mac Safari latest browsers So here i have solutions for you.

// Check for WebRTC
if (!navigator.webkitGetUserMedia && !navigator.mozGetUserMedia && !navigator.mediaDevices.getUserMedia) {
  alert('WebRTC is not available in your browser.');
}
console.log(navigator);
// navigator object will help you to understand all browsers.
// for Safari !navigator.mediaDevices.getUserMedia

how to make getUserMedia() work on all browsers

7 Answers7

Linked