HTML5 Video Recording
Last update: 24th of February 2015
Author: Octavian Naicu
There are 2 big official W3C initiatives that push for video recording support in HTML5 but other attempts as well:
1. HTML Media Capture
HTML Media Capture facilitates user access to a device's media capture mechanism, such as a camera, or microphone, from within a file upload control. It works by reusing the
captureattribute to indicate the fact that on the spot capture is preferred. Native OS apps are used to perform the actual recording.
Here's the proposed HTML5 code for doing a video capture using your OS' native video capturing capabilities:
When the user clicks on the [Choose File] button created by the second line of code, a native OS video recording app starts up to capture the video. After the video is recorded the form is updated. Pressing [Upload] uploads the video to the web server with the rest of the form data.
Desktop browsers have ignored the specification however all mobile browsers currently support the spec. Here’s how it looks and works on iPhone/iOS:
- The user is presented with native HTML [Choose File] + [Upload] buttons.
- Pressing [Choose File] prompts the user to Take Video or Choose Existing.
- Taking a new video opens the native recording app and you can start recording.
- After recording is stopped you can review it, use it or take another one.
- If you use it you are taken back to the updated form in the browser where the [Upload] button becomes active .
The specification document also gives an example of how it should look on a Mac. The image on the right represents how the OS should prefer capturing an image on the spot when the boolean
capture attribute is present in the code.
- W3C Candidate Recommendation
- support in Android Web Browser, Chrome and Firefox on Android 2.2+ with
capturebeing supported in 3.0+
- support in Safari & Chrome on iOS 6.0+ except for the
captureattribute and audio recording
- not implemented by any desktop browser
- implemented by HDFVR as a fallback for video recording on mobile devices
Demo (open on mobile devices):
2. MediaStream Recording
If you want to learn more about this topic, check out our extensive guide on the MediaRecorder API (formerly Mediastream Recording API) on addpipe.com.
The MediaStream Recording is a proposal (document in draft status) by the the Media Capture Task Force (a joint task force between the WebRTC and Device APIs working groups) for a JS API who's purpose is to make basic video recording from the webcam (or mobile device camera) in the browser very simple.
The latest version of this document - W3C working draft from 25th of January 2015 - can be reviewed on the W3C site at http://www.w3.org/TR/mediastream-recording/.
The document defines a new MediaRecorder JS object and it's JS API:
- attributes: stream, state, etc.
- events: onstart, onstop, onresume, etc.
- methods: start, stop , pause, resume
This API attempts to make basic recording very simple, while still allowing for more complex use cases. In the simplest case, the application instatiates the
MediaRecorder object, calls
record() and then calls
stop() or waits for the
MediaStream to be ended. The contents of the recording will be made available in the platform's default encoding via the
Functions are available to query the platform's available set of encodings, and to select the desired ones if the author wishes.
The application can also choose how much data it wants to receive at one time. By default a
Blob containing the entire recording is returned when the recording finishes. However the application can choose to receive smaller buffers of data at regular intervals.
This API should not be confused with the
MediaStreamRecorder interface mentioned in the WebRTC specification - Editor’s Draft from October 2011 but removed in subsequent drafts.
- document draft
- works only in Firefox 27 and only for audio
- Media Stream Recording, Firefox 27 required, audio only.
3. Other attempts
- RecorderJS - record wav audio in browser https://github.com/mattdiamond/Recorderjs
- Whammy.js - encodes .webm video from a list of .webp images https://github.com/antimatter15/whammy
- RecordRTC: - highly experimental cross browser JS library that gathers several workarounds and barely implemented API’s for recording across browsers https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC.