how to make getUserMedia() work on all browsers

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