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