How to capture a camera's input on a mobile device using <input> element

This guide explains the steps to capture a user's camera on a mobile device. Although this guide is focused mainly on HTML, I added a tip on how to preview captured image using JavaScript.

PHILOSOPHY

Modern mobile browsers allow web developers to access the device's camera using a simple <input type="file"> element with some special attributes. I explain how to implement this feature for capturing photos or videos from the user’s camera directly via a mobile device below

BASIC SYNTAX

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

BELOW IS A MORE DETAILED LIST ABOUT THE ATTRIBUTES:

1. type="file"

   This makes the input element a file picker.

2. accept="image/*" or accept="video/*"

   Tells the browser to restrict selectable file types.

   Common values
   image/* — Opens camera for photos.
video/* — Opens camera for videos.
image/*,video/* — Allows choosing both types.

3. capture (attribute with or without value)

   This hints to the browser to open the camera app instead of the gallery.

Front Camera and Rear Camera Options:
capture="user" <!-- Front camera (selfie) -->
capture="environment" <!-- Rear camera -->
capture <!-- Defaults to available camera -->

THE NEXT LIST CONSIST OF GUIDELINES...

1. To Capture a Photo

<label for="cameraInput">Take a photo:</label>
<input type="file" id="cameraInput" accept="image/*" capture="environment">

2. To Capture a Video

<label for="videoInput">Record a video:</label>
<input type="file" id="videoInput" accept="video/*" capture>

3. To Capture Either Photo or Video

<label for="mediaInput">Capture photo or video:</label>
<input type="file" id="mediaInput" accept="image/*,video/*" capture>

NOTE
Desktop browsers usually ignore the capture attribute.While some modern browsers support video capture, others may only support image capture. The device capabilities determines if the capture attribute support video or image capture.

PRIVACY CONSIDERATION
The browser asks for permission before accessing the camera.
Files are not uploaded automatically — you need to handle that via JavaScript or form submission.

Ensure to do the following:
*Always provide fallback instructions for users.
*Use CSS to style the for a better mobile experience.
*Hide the input and trigger it with a button for a custom UI.

TIP TO PREVIEW CAPTURED IMAGE

<input type="file" id="cameraInput" accept="image/*" capture>
<img id="preview" style="max-width: 100%; margin-top: 10px;" />

<script>
document.getElementById("cameraInput").addEventListener("change", function(event) {
const file = event.target.files[0];
if (file) {
const preview = document.getElementById("preview");
preview.src = URL.createObjectURL(file);
}
});
</script>

KEYPOINT

The HTML <input type="file"> element with the capture attribute is a powerful, easy-to-implement way to open the mobile device’s camera for capturing images or videos. While it doesn’t provide deep camera control (like WebRTC does), it’s perfect for simple use cases like uploading profile pictures, document scans, or video messages.

This brings us to the end of this Manual.