Recording Video On Mobile Devices With HDFVR & HTML Media Capture

Learn how HDFVR uses the new HTML Media Capture standard to record video on mobile browsers

Getting started with HTML Media Capture on mobile

Recording video from browsers was never possible using native HTML code, until recently always being delegated to browser plugins such as Flash Player or Silverlight.

On the desktop HDFVR uses Flash Player to capture audio and video, encode it, and send it to a media server like Wowza or Adobe Media Server. Currently there is no other way, only Flash Player has the builtin video codecs, encoding capabilities and a streaming mechanism (rtmp) to send the data to a server.

But starting with HDFVR 1.2 (build 627) video recording with HDFVR also works in mobile browsers of smartphones like Safari on iOS and Internet on Android. HDFVR now detects that it's being loaded from a mobile device and it switches from the Flash app to HTML Media Capture.

HTML Media Capture Spec

HTML Media Capture is a specification proposed by the W3C's Device APIs Working Group that attempts to make video and audio recording possible - on all browsers mobile or desktop - by extending the <input type="file"> HTML object. So far it has only been implemented on mobile devices.

The HTML Media Capture specification is different from the Media Capture and Streams specification that defines a set of JavaScript APIs ( including getUserMedia ) for acessing the webcam and microphone.

What the user sees

Here's how it works from the end user perspective:

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

Device orientation

The recordings made will have the correct orientation when played back in the browser in the HTML video player. When loaded in other players such as JW Player or Flow Player the default orientation of the video may differ so the recording may appear turned to the side or even up side down, but this can be taken care of if the specific player has video rotation capabilities.

Browser support:

  • iOS6 Safari and Chrome Mobile for iOS
  • Android 3.0 browser - one of the first implementations
  • Chrome Mobile for Android (0.16)
  • Firefox Mobile 10.0 for Android
  • Opera 16 for Android

HTML Media Capture is supported by basically all smartphone browsers but it is not supported by any desktop browser like Internet Explorer, Chrome and Firefox.

How it's different than recording on the desktop with Flash + media server

Recording using HTML Media Capture is different than recording with the Flash Client + media server in several ways:

  1. The videos will be created as .mp4 files on Android and .mov on iOS. Both platforms will use H.264 for video and AAC for audio but the .mov files recorded by iOS devices are not playable on Android.
  2. The files will be uploaded to the web-server and not streamed to the media-server. The recordings will also be automatically saved to the device.

There are also some limits you should be aware:

  1. Because the web server handles the uploading you might be limited by the web server's upload limit. This limit can be changed from the web-server config files, but usually it's a very small amount.

File formats

  • Android will create .mp4 files
  • iOS devices will create .mov files (not playable on Android)
  • Some older phones will create .3gp files

Get personalized help

Customers with an active Support & Updates Plan can submit support requests to our knowledgeable techs via the client area.

Enter client area