HTML Media Capture

Michael Gearon

Last updated on December 29, 2021

The media capture specification allows you to specify what is uploaded or captured. It is currently a W3C recomendation since 1 February 2018 since last update. It can be used in a form when you’re asking the user to upload an image you can specify that the file format should be an image.

What is Media Capture?

Media Capture is currently a W3C Last Working Draft, it allows users the ability to access there camera, microphone or video camera to then either select a pre-existing file or to record and upload media.

The different types

Photo

<form action="server.cgi" method="post" enctype="multipart/form-data">
  <input type="file" name="image" accept="image/*" capture>
  <input type="submit" value="Upload">
</form>

Video

<form action="server.cgi" method="post" enctype="multipart/form-data">
  <input type="file" name="video" accept="video/*" capture>
  <input type="submit" value="Upload">
</form>

Audio

<form action="server.cgi" method="post" enctype="multipart/form-data">
  <input type="file" name="audio" accept="audio/*" capture>
  <input type="submit" value="Upload">
</form>

An example of media capture

For a live preview of you can use the CodePen pen:

See the Pen HTML Media Capture by Michael Gearon (@michaelgearon) on CodePen.

Written by