Video For The Web - Live!

HTML5 Video

<video controls="controls">
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

plus JavaScript and Canvas

Example modified from HTML5 ROCKS HTML5 Video

// Variable for the HTML Video Object
var thevideo = document.getElementById('thevideo');

// Variable for the canvas that is used for buffering
var thecanvas_buffer = document.getElementById('thecanvas_buffer');

// Variable for the final drawing canvas
var thecanvas_draw = document.getElementById('thecanvas_draw');

// Interval object - will determine how often to grab video from video object and draw to buffer
var draw_interval = null;

// Contexts for canvases			
var ctx_buffer = null;
var ctx_draw = null;

//var offsets = [];
//var inertias = [];
//var slices = 4;
//var out_padding = 100;
//var inertia = -2.0;

var interval = null;

// 'canplay' event, basically init for the video object
thevideo.addEventListener('canplay', function() {

	// Set the height and width of the canvases to match the video
	thecanvas_buffer.width = thevideo.videoWidth;
	thecanvas_draw.width = thevideo.videoWidth;
	thecanvas_buffer.height = thevideo.videoHeight;
	thecanvas_draw.height = thevideo.videoHeight;

	// get the contexts	
	ctx_buffer = thecanvas_buffer.getContext('2d');
	ctx_draw = thecanvas_draw.getContext('2d');
}, false);


/*
for (var i = 0; i < slices; i++) {
	offsets[i] = 0;
	inertias[i] = inertia;
	inertia += 0.4;
}
*/

// When the video starts playing
thevideo.addEventListener('play', function() {
	processEffectFrame();
	
	// Set the interval, every 33 milliseconds, call processEffectFrame
	if (interval == null) {
	  interval = window.setInterval(function() { processEffectFrame() }, 33);
	}        
}, false);

function processEffectFrame() {

	// Draw the video image on the the buffer
	ctx_buffer.drawImage(thevideo, 0 ,0);
	
	// clear the drawing canvas
	//ctx_draw.clearRect(0, 0,  thecanvas_draw.width, thecanvas_draw.height);
	
	var bufferData = ctx_buffer.getImageData(0,0,thecanvas_buffer.width,thecanvas_buffer.height);
	//ctx_draw.putImageData(bufferData, 0, 0);
							
	// Pixel by pixel
	var size = 20;
	for (var y = 0; y < thevideo.videoHeight-size; y+=size) {
		for (var x = 0; x < thevideo.videoWidth-size; x+=size) {

			var currentPixel = y*thevideo.width+x;
			
			var r = bufferData.data[currentPixel*4];
			var g = bufferData.data[currentPixel*4+1];
			var b = bufferData.data[currentPixel*4+2];
			var a = bufferData.data[currentPixel*4+3];

			//var imgData=ctx_draw.createImageData(size,size);
			var imgData=ctx_buffer.getImageData(x,y,size,size);
			for (var i=0;i<imgData.data.length;i+=4)
			{
				// R
				imgData.data[i+0]=r;
				// G
				imgData.data[i+1]=g;
				// B
				imgData.data[i+2]=b;
				// A
				imgData.data[i+3]=a;
			}
			ctx_draw.putImageData(imgData,x,y);
		}
	}	
	
};

// Clear the interval when we pause
thevideo.addEventListener('pause', function() {
	window.clearInterval(interval);
	interval = null;
}, false);

// Clear the interval when video ends
thevideo.addEventListener('ended', function() {
	clearInterval(interval);
}, false); 				
			

WebRTC

getUserMedia

function launchIt() {
	window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
	navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

	var myvideo = document.getElementById('myvideo');

	if (navigator.getUserMedia) {
		navigator.getUserMedia({video: true}, function(stream) {
				myvideo.src = window.URL.createObjectURL(stream) || stream;
				myvideo.play();
			}, function() {console.log("FAIL");});
	}	
}				
			

plus JavaScript and Canvas

PeerConnections