HTML Media Capture Examples

Made by the Pipe Video Recording Platform

These examples are based on the latest HTML Media Capture spec, a W3C Recommendation spec from 01 February 2018 (link).

As opposed to earlier versions of the spec, the capture attribute is now an enumerated attribute (list of strings) instead of a boolean. The change allows the developer to specify the preferrerd facing mode (user or environment) when recording straight from the hardware (camera, microphone, etc.).

Video recording: single file

Example 1: The simplest way to use HTML Media Capture for capturing video is to use the following line. It should allow the user to both select a video from the library AND record a new video on the spot.

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

Example 2: If you add the capture attribute (as boolean) the camera app should pop up instantly without letting the user select an existing file from the library.

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

Example 3 & 4: Per the newer versions of the spec you can indicate your preferred facing mode for the camera: front (user) or back (environment). Use the 2 examples below to test support for these new values on your browser, OS or device.

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

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

Video recoring: multiple files

Example 5: By using the multiple attribute, users will be allowed to select multiple videos from their library. This works on Safari on iOS which is the device I've tested on multiple times. Make sure you omit the capture attribute here, otherwise the option to choose existing files from the library might not be presented.

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

Audio recording: single file

Example 6: Asking for an audio recording instead of a video recording is as simple as changing the value of the accept attribute to audio/*. Audio only recording does not work on iOS (tested up to 13.3) and one some Android devices.

<input type="file"  accept="audio/*" >

Example 7: Adding the capture attribute here should force a new audio recording instead of allowing the user to select an existing one from the library. This crashed Safari on all versions of iOS 13 (tested up to 13.3) (reported bug).

<input type="file" accept="audio/*" capture>

Photo: single file

Example 8: This code allows the user to select a photo from his or her library OR take a new one using the camera app

<input type="file"  accept="image/*" >

Example 9: By adding the capture attribute users will be prompted to capture a photo on the spot using the camera app

<input type="file" accept="image/*" capture>

Example 10 & 11: Per the newer versions of the spec you can indicate your preferred facing mode for the camera: front (user) or back (environment). Use the 2 examples below to test support for these new values on your browser, OS or device.

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

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

Photo or video: single file

Example 12: The code below should allow the user to select or capture a video OR a photo

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

Example 13: The code below should allow the user to only capture a new video OR a photo

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