Correct Syntax for HTML Media Capture

While researching HTML Media Capture for recording videos from mobile devices with the Pipe video recorder we’ve came across several possible syntaxes. This post explains where they originate from and which one you should use.

Intro

HTML Media Capture works by extending the <input type="file"> HTML field with a new capture attribute which instructs the user agent to preferably use the camera and microphone to capture media on the spot as opposed to choosing a file from the device’s file system.

Accept attribute

HTML Media Capture works in conjunction with the accept attribute which can take several values, among them:

accept="audio/*"
accept="video/*"
accept="image/*"

A user clicking on an input field whose accept attribute value has been set to video/* for example will only be able to select (or capture) a video file.

The way the filtering is accomplished differs between OSs with macOS graying out all other filetypes while Windows 10 only shows the compatible video files.

The definition of a video file also differs at the browser level with Safari 10 on macOS graying out .mp4 files while Chrome on macOS allowed both .mp4 and .mov files.

Forcing use of camera & microphone

The syntax differences I’ve met were in relation to the capture attribute.

According to the W3C Candidate Recommendation, it’s a boolean attribute, that, if specified, indicates that the capture of media directly from the device’s camera and/or microphone is preferred. Since it’s a boolean attribute it should be used like this:

<input type="file" name="video" accept="video/*" capture>

<input type="file" name="video" accept="video/*" capture="capture">

But the popular Capturing Audio & Video in HTML5 article used a different syntax:

<input type="file" accept="video/*;capture=camcorder">

And several Q&A on StackOverflow used the capture attribute with a string value like this:

<input type="file" accept="video/*" capture="camcorder">

Syntax changes in spec

It seems all versions were right at a certain point but the spec changed.

capture first appeared in the July 2010 spec as a parameter which could be added to the accept attribute but in the April 2011 spec it became an attribute in it’s own right with 4 string values (camera, camcorder, microphone, filesystem) and was finally changed to a boolean type in December 2012 and that’s how it remained since including in the W3C Candidate Recommendations.

Thus the correct syntax is

<input type="file" name="video" accept="video/*" capture>

and

<input type="file" name="video" accept="video/*" capture="capture">

Selecting multiple files

The multiple attribute (also boolean) is not part of Media Recorder API but it is supported by both Safari and Chrome on mobile devices which allow the user to select more than 1 video/photo/audio file when the attribute is specified:

<input type="file" name="video" accept="video/*" multiple>

Multiple selection works only when choosing from Documents (Android) and Photo Library (iOS). On Android you need to hold press on tone file and then select more. On iOS you’ll be able to select multiple files from the Library.

Allowing both images and videos

HTML5’s allow attribute is flexible enough to support more than one type of content. This code for example will allow the user to select (or capture) both images and video recordings:

<input type="file" name="video" accept="video/*,image/*">

Support

<input type="file"> is supported since Android 2.0 and iOS 6.0. The capture attribute is supported since Android 3.0 but there’s no support for it in iOS (checked with iOS 10 too).

To test some of the other options I’ve put together a HTML Media Capture demo page with 20+ code variants for video, audio, pictures, multiple options, multiple selection and variants of the capture attribute. The code is available on GitHub.

	Safari & Chrome on iOS 9 & 10	Chrome on Android 4.4 & 6
accept="video/*"	yes	yes
accept="audio/*"	no	yes
accept="image/*"	yes	yes
multiple accept values	only image+video	no, breaks filtering
capture on the spot or select file	yes	yes
capture in accept attr (very old spec)	no	no
capture="camcorder" (old spec)	no	yes
boolean capture (w3c candidate)	only in iOS 10.3+	yes
multiple files	yes	yes
file type	mov	mp4
video codec	h.264	h.264
audio codec	aac @ 44.1kHz	aac @ 48kHz

Also check out the File Upload Compatibility Table from the Programming the Mobile Web book by Maximiliano Firtman (2013).

HTML Media Capture spec revisions

For ease of reference I’ve linked all HTML Media Capture spec revisions below

2 May 2017 (Editor’s Draft)
https://w3c.github.io/html-media-capture/

9 September 2014 (W3C Candidate Recommendation)
https://www.w3.org/TR/html-media-capture/

19 June 2014 (Working Draft)
https://www.w3.org/TR/2014/WD-html-media-capture-20140619/

9 may 2013 (W3C Candidate Recommendation)
https://www.w3.org/TR/2013/CR-html-media-capture-20130509/

26 March 2013 (Working Draft)
https://www.w3.org/TR/2013/WD-html-media-capture-20130326/

13 December 2012 (Working Draft, capture of type boolean)
https://www.w3.org/TR/2012/WD-html-media-capture-20121213/

12 July 2012 (Working Draft)
https://www.w3.org/TR/2012/WD-html-media-capture-20120712/

29 May 2012 (Working Draft)
https://www.w3.org/TR/2012/WD-html-media-capture-20120529/

14 April 2011 (Working Draft,capture with 4 string values)
https://www.w3.org/TR/2011/WD-html-media-capture-20110414/

28 Sept 2010 (Working Draft)
https://www.w3.org/TR/2010/WD-html-media-capture-20100928/

20 July 2010 (Working Draft, capture appears as part of accept)
https://www.w3.org/TR/2010/WD-html-media-capture-20100720/

10 April 2010 (Working Draft, no capture attribute)
https://www.w3.org/TR/2010/WD-capture-api-20100401/