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
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
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