HTML5 getUserMedia record webcam, both audio and video

Is it possible to use Chrome to capture video (webcam) and audio (microphone) from the browser and then save the stream as video file?

I would like to use this to create a video/photobooth-like application that allows users to record a simple (30 second) message (both video and audio) to files that can later be watched.

I have read the documentation but I have not (yet) seen any examples on how to capture both audio & video, also I did not find a way yet to store the results in a video file.

Who can help?

MediaStreamRecorder is a WebRTC API for recording getUserMedia() streams( still under implementation) . It allows web apps to create a file from a live audio/video session.

<script language="javascript" type="text/javascript">
function onVideoFail(e) {
    console.log('webcam fail!', e);
  };

function hasGetUserMedia() {
  // Note: Opera is unprefixed.
  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
  // Good to go!
} else {
  alert('getUserMedia() is not supported in your browser');
}

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia  = navigator.getUserMedia || 
                         navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia || 
                           navigator.msGetUserMedia;

var video = document.querySelector('video');
var streamRecorder;
var webcamstream;

if (navigator.getUserMedia) {
  navigator.getUserMedia({audio: true, video: true}, function(stream) {
    video.src = window.URL.createObjectURL(stream);
    webcamstream = stream;
//  streamrecorder = webcamstream.record();
  }, onVideoFail);
} else {
    alert ('failed');
}

function startRecording() {
    streamRecorder = webcamstream.record();
    setTimeout(stopRecording, 10000);
}
function stopRecording() {
    streamRecorder.getRecordedData(postVideoToServer);
}
function postVideoToServer(videoblob) {

    var data = {};
    data.video = videoblob;
    data.metadata = 'test metadata';
    data.action = "upload_video";
    jQuery.post("http://www.foundthru.co.uk/uploadvideo.php", data, onUploadSuccess);
}
function onUploadSuccess() {
    alert ('video uploaded');
}

</script>

<div id="webcamcontrols">
    <button class="recordbutton" onclick="startRecording();">RECORD</button>
</div>

http://www.w3.org/TR/mediastream-recording/

As far as i am aware there is no such way to record audio and video together and save them as one file. it is possible to capture and save the audio as a wav file and the video as a webm file.

here is a great post on how to save your video; http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia

and a usefully utillity to save your audio

https://github.com/mattdiamond/Recorderjs

There are currently several production ready solutions for recording audio and video on the web.

Desktop Browsers

MediaRecorder API (HTML)

The MediaRecorder API (MediaStream Recorder) relies on getUserMedia() for webcam access and is supported by Firefox 30+ and Chrome 49+.

Flash client + rtmp media server

You will need a Flash (.swf) application that's embedded in your web page, captures the visitors webcam and mic, encodes the raw video and audio data (using the builtin codecs: H.264, Spark, Nellymoser ASAO and Speex) and streams the data as it is recorded (through rtmp) to a media server.

Because the data is streamed, as soon as you stop the recording, all the data is already on the media sevrer (no upload times). Another advantage is that the video is not lost if the client computer crashes.

You have at least 3 options for the media server:

1. Red5 is free and open source (I've personally contributed code patches to the recording process in it and I can guarantee it works great)
2. Wowza ($65/month)
3. Adobe Media Server Pro ($4500)

The media server receives (again through streaming/rtmp not through http) the data and, depending on the codec used on the client and the media server used, the audio and video data is multiplexed in mp4, flv or f4v files.

This Flash client + media server recording process - which has worked pretty well since Flash Player 6 in 2002.

Mobile browsers

HTML Media Capture

You can use HTML Media Capture (explained here with screenshots) to record video using the device's native video recording app and codecs. HTML Media Capture records locally (on the device) and then it uploads (normal HTTP upload process) the file to the web server.

When using HTML Media Capture in Safari on iOS devices like the iPhone it will create a .mov file that's not playable on Android. The solution is to convert it to .mp4 server side using FFmpeg.

When using HTML Media Capture in the Android browser the end result will be a .mp4 file that's playable on the iPhone. Some older Android phones will create .3gp files.

A commercial solution that implements both (Flash client + media server on desktop and HTML Media Capture on mobile) is HDFVR.