MediaRecorder

A new feature the MediaRecorder API is available in recent versions of Chrome and Firefox.

Here is the basic usage. It assumes that the "stream" variable is from a "getUserMedia" call or an incoming WebRTC stream:

// This array will contain "chunks" of the video captured by the MediaRecorder
var chunks = [];

// Give the MediaRecorder the stream to record
var mediaRecorder = new MediaRecorder(stream);

// This is an event listener for the "stop" event on the MediaRecorder
// Probably should write it:
// mediaRecorder.addEventListener('stop', function(e) { ... });    
mediaRecorder.onstop = function(e) {
	console.log("stop");

	// Create a new video element on the page
	var video = document.createElement('video');
	video.controls = true;
	
	// Create a blob - Binary Large Object of type video/webm
	var blob = new Blob(chunks, { 'type' : 'video/webm' });
	// Generate a URL for the blob
	var videoURL = window.URL.createObjectURL(blob);
	// Make the video element source point to that URL
	video.src = videoURL;
	
	// Put the video element on the page
	document.body.appendChild(video);
};

// Another callback/event listener - "dataavailable"
mediaRecorder.ondataavailable = function(e) {
	console.log("data");
	// Whenever data is available from the MediaRecorder put it in the array
	chunks.push(e.data);
};

// Start the MediaRecorder
mediaRecorder.start();

// After 2 seconds, stop the MediaRecorder
setTimeout(function() {
	mediaRecorder.stop();
}, 2000);

Basic getUserMedia Stream Example
SimplePeer example from Week 5 updated with recording capabilities

Canvas as MediaRecorder Source

One thing that is very interesting, is that a canvas can be streamed using WebRTC in much the same manner as video/audio which also means that we can record a canvas in realtime with MediaRecorder.

To do any of this, all that is required is to get a "stream" from the Canvas:

var canvasStream = document.getElementById("thecanvas_id").captureStream();
MediaRecorder from Canvas Example

More Information:
Record audio and video with MediaRecorder
Mozilla has a bit more documentation online
Record almost everything in the browser with MediaRecorder

Saving on Node.js with Socket.io

If you want to send the recorded video to a server for saving, it is as simple as emitting the "blob" of video to the server via a socket.

mediaRecorder.onstop = function(e) {
	console.log("stop");

	var video = document.createElement('video');

	video.controls = true;
	var blob = new Blob(chunks, { 'type' : 'video/webm' });
	var videoURL = window.URL.createObjectURL(blob);
	video.src = videoURL;

	document.body.appendChild(video);

	// Send to the server
	socket.emit('video',blob);
};
Then on the server side, when you receive it, you can write it to a file using the fs (file system) module:
socket.on('video', function(data){
	console.log(data);
	fs.writeFile(__dirname + '/x.webm', data, function(err){
		if (err) console.log(err);
		console.log("It's saved!")
	});
});

SimplePeer example from Week 5 updated with recording capabilities