Accessing camera through browser

html

responsive-design

best-practices

media-capture

byAlex Kataev·Jan 28, 2025

Access a browser's camera using WebRTC API specifically, the navigator.mediaDevices.getUserMedia method. Here's the JavaScript snippet to do just that:

async function openCamera() {
  const video = document.createElement('video');
  // Adding the video straight into the document body, because why not?
  document.body.appendChild(video);
  try {
    // Trying to access your webcam, hopefully you'll allow that!
    video.srcObject = await navigator.mediaDevices.getUserMedia({ video: true });
    video.play();
  } catch (e) {
    // Oops, something went wrong )
    console.error('Webcam access error:', e);
  }
}
openCamera();

This script dynamically adds a video to the HTML, initializes a video feed, and plays it. Bear in mind, the user may be prompted for consent, and the site must be served over HTTPS.

Using HTML input for camera on iOS 6+

For iOS 6+ devices, using camera access can be simplified to a simple HTML input element. Forget about those complex JavaScript lines, here's all you need:

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

After triggering this input, the user can choose to either take a photo or select one from the photo library. The capture attribute encourages directly accessing the camera, leaving out the photo library. It's direct and efficient.

Working with different media types

Depending on what media you want to capture, you can modify the accept attribute in the input tag:

Images:
```
<input type="file" accept="image/*">
```

Videos:

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

Audio:

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

This way, users can utilize different media types from their iOS Safari directly on your web app.

Ensuring compatibility

It’s all about compatibility. Starting from iOS 8.x, inputs of file type support accessing the camera, photo, and video library. To see this feature in action on iOS devices, check out Addpipe's demo.

Handling state changes

Use the onchange event to trigger a function whenever the user selects a file:

<input type="file" accept="image/*" onchange="handleFiles(this.files)">

Then the function can process or upload the media.

Advanced capture and streaming

Should you seek a powerful application, getUserMedia offers a complex setup with more controls. Visit HTML5 Rocks for reading up on how to implement real-time camera previews, snapshots to canvas, and more.

Managing Resources

Remember to terminate the video stream using MediaStreamTrack.stop(). It's best to turn off the camera when not in use. We don't want an eerie horror movie situation now, do we?

Exploring HTML5's potential

Take a look at the W3C specification for HTML5 Media Capture when contemplating methods for camera access on iOS browsers. Although <input> type file makes it quick and easy, you may need deeper digging for advanced features.