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