Capture media on mobile devices with just HTML

Capture media with HTML

With the HTML attribute capture, you can do on mobile web browsers:^[1]

<div>
    <label for="sound">Capture sound for upload:</label>
    <input type="file" id="sound" capture accept="audio/*">
</div>
<div>
    <label for="environment">Capture a video of your environment for upload:</label>
    <input type="file" id="environment" capture="environment" accept="video/*">
</div>
<div>
    <label for="user">Capture a picture of yourself for upload:</label>
    <input type="file" id="user" capture="user" accept="image/*">
</div>

to get:

capture="environment" activates the rear camera while capture="user" activates the front camera. An assignment of just capture indicates a media capture without further specification of user or environment.

Notice the use of the accept attribute. A value of accept="audio/*" will open the audio recorder – in this case it´s sufficient to place capture without any additional value inside the input tag (that does not work on iPhone, which still opens the camera for this setting). A value of accept="video/*" will open the camera in video mode, a value of accept="image/*" will open the camera in photo mode.

What´s not used, but would be possible, is to integrate the multiple attribute to capture multiple media with a single dialog.

Is it worth it?

At first I was excited to have the ability of capturing media with only HTML. At a second look I find it is too limited for real world usage, because:

• The file upload dialog looks so awkward that you anyway need to style it with JavaScript, the advantage of only HTML is gone in my view.
• The capturing of media does not work on desktop browsers, which is no-go for me.
• Capturing audio is not working as expected on iPhone.