getUserMedia is a method specified as part of WebRTC that allows access to the microphone and webcam of users.
// These help with cross-browser functionality (shim) window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; // The video element on the page to display the webcam var video = document.getElementById('thevideo'); // if we have the method if (navigator.getUserMedia) { navigator.getUserMedia({video: true}, function(stream) { video.src = window.URL.createObjectURL(stream) || stream; video.play(); }, function(error) {alert("Failure " + error.code);}); }
One cool aspect of this is that you can draw the video on to a canvas as well (perhaps to manipulate it):
// Canvas element on the page var thecanvas = document.getElementById('thecanvas'); var thecontext = thecanvas.getContext('2d'); var draw = function() { // Draw the video onto the canvas thecontext.drawImage(video,0,0,video.width,video.height); document.getElementById('imagefile').src = dataUrl; // Draw again in 3 seconds setTimeout(draw,3000); }; draw();
From the canvas, you can create an image and send that via Socket.io to everyone else, making a poor persons video server:
// Create a data URL from the canvas var dataUrl = thecanvas.toDataURL('image/webp', 1); // Optionally draw it to an image object to make sure it works document.getElementById('imagefile').src = dataUrl; // Send it via our socket server the same way as we send the image socket.emit('image', dataUrl);
More Information: Capturing Audio and Video in HTML5