2 minutes

HTML Media Capture is Now a Proposed Recommendation

1 Comment

HTML Media Capture is a W3C specification that defines an HTML form extension that facilitates user access to a device’s media capture mechanism, such as camera or microphone, or within a file upload control.

It works by extending the <input type=”file”> element with a capture attribute.

Surprisingly, browsers were never good at capturing images and videos from your web camera or recording sounds from your device’s microphone. Plugins like Flash and Silverlight filled this missing functionality on desktops, while on mobile it was quite tricky. Flash is dead, Silverlight is the walking dead and mobile browsers are taking over the world.

As of Nov. 28, HTML Media Capture is a W3C proposed recommendation.

The Syntax

The syntax is simple:

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

In mobile browsers, this method will allow the user to either choose which app to use to capture the image or choosing an existing image file.

HTML Media Capture sample implementation

For video capture the accept attribute is changed to video:

Impress your audience with animated websites and web presentations.

With Slides, we don’t make you start from an empty slate. All you have to do is to pick the elements you like best and combine them. Each slide has been carefully crafted to satisfy three key criteria: aesthetic, function and usability. That way you know every element works together seamlessly while enhancing the impact of your content.

Learn More Try the Demo
<input type="file" name="video" accept="video/*" capture="environment">

And here is a sample for capturing audio:

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

Why Media Capture?

The specification is:

  • Easy to Implement: Developers just need to add defined tags for media capture without having to write long lines of code or implement third-party apps.
  • Flexible: The implementation supports on-site images, audio and video capturing via a device’s hardware.
  • User-friendly: For end users, all it takes to interact with the browser is clicking a “capture” button. This will trigger the device’s hardware or will allow the users to submit media content from the file system.
  • Universal: The specification works across various platforms, without needing platform-specific implementations.

HTML Media Capture Browser Support

All modern mobile browsers support this implementation. The specification is available here, and you may want to look at Media Capture and Streams specification. While the HTML Media Capture specification defines an HTML form extension, the Media Capture and Streams specification defines a set of JavaScript APIs.

Doru Ciobanu

Doru is an old BMW lover with a big heart.

Posts by Doru Ciobanu

Earn 25% commission on affiliate sales

We build high-quality products

Designmodo offers advanced drag and drop website and email builders for web designers and developers, we have everything you need to make money.

Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree