In honor of Chrome 21, I just wanted to take a brief moment to demonstrate how incredibly easy it is to access the webcam with the new MediaStream API.

var stream;
var video = document.getElementById('MediaStreamVideo');

navigator.webkitGetUserMedia(
	{video: true, audio: true}, // Options
	function(localMediaStream) { // Success
		stream = localMediaStream;
		video.src = window.webkitURL.createObjectURL(stream);
	},
	function(err) { // Failure
		alert('getUserMedia failed: Code ' + err.code);
	}
);

// stream.stop();

Yeah, that’s it. Obviously I’m skipping cross-browserness, but you get the idea. Check it out:

We even have some sepia going on, thanks to CSS filter effects. And it’s also really easy to copy the stream over to a canvas element, using drawImage(), if you want to do more crazy stuff. And if you want to see this done by someone who put some serious time into it, check out the amazing Webcam Toy.

This only works in Chrome for now, but hopefully it’ll be up in Firefox later this year.