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.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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;