MediaRecorder

A new feature is being worked on by the browser manufacturers, the MediaRecorder API. Mozilla has a bit more documentation online.

In order to use it, in the current version of Chrome (48), you need to "enable experimental Web Platform" in the chrome://flags.

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

    var chunks = [];

	var mediaRecorder = new MediaRecorder(stream);
    
	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);
    };

    mediaRecorder.ondataavailable = function(e) {
    	console.log("data");
			chunks.push(e.data);
	};

    mediaRecorder.start();

    setTimeout(function() {
    	mediaRecorder.stop();
    }, 2000);

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

		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!")
			});
		});