HTML5 Video Recording

The State of Recording Audio & Video using HTML5 and JavaScript

Are you planning to do some html5 video capture from your visitors webcams anytime soon? The read along because in this page we attempt to gather all initiatives for recording video using just native HTML5 and JavaScript on both desktop and mobile browsers.

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
  2. MediaStream Recording
  3. Other attempts

1. HTML Media Capture

HTML Media Capture is the Device APIs Working Group’s first go at standardizing media capture on the web.

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 <input type="file">.

<> It also adds a new capture attribute 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:

  1. The user is presented with native HTML [Choose File] + [Upload] buttons.
    Recording a video on iOS7 with HTML Media Capture
  2. Pressing [Choose File] prompts the user to Take Video or Choose Existing.
    Recording a video on iOS7 with HTML Media Capture
  3. Taking a new video opens the native recording app and you can start recording.
    Recording a video on iOS7 with HTML Media Capture
  4. After recording is stopped you can review it, use it or take another one.
    Reviewing the recorded video on iOS7 with HTML Media Capture
  5. If you use it you are taken back to the updated form in the browser where the [Upload] button becomes active
  6. .
    After recording a video on iOS7 with HTML Media Capture

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.

Media Capture Proposal Functioanlity on Mac

Current status:

Demo (open on mobile devices):

  1. http://hdfvr.com/demo/hdfvr-demo

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 dataavailable event.

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.

Current status:

  • document draft
  • works only in Firefox 27 and only for audio

Demos:

3. Other attempts