HTML Media Capture Examples

These examples have been adapted from the Examples section of the HTML Media Capture spec.

The examples demonstrate how to give hints that it is preferred for the user to capture media of a specific MIME type using the media capture capabilities of the hosting device. Both a simple declarative example using an HTML form, as well as a more advanced example including scripting, are presented.

For implementation status, see the wiki.

Test for @capture and @accept existence

Testing for attribute existence only.

Example 1

To take a picture using the device's local still image capture device, such as a camera, and upload the picture taken using an HTML form:

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

Example 2

Or alternatively, to capture video using the device's local video camera:

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

Example 3

Or alternatively, to capture audio using the device's local microphone:

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

Examples 4-7

For more advanced use cases, specify the capture attribute in markup and handle the file upload in script via XMLHttpRequest:

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

Examples without @capture

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

<input type="file">

@capture and @download

See capture-and-download.html.