How to access a mobile's camera from a web app?

Plumbing the depths of mobile camera access

Dive deep in, the water's fine. Depending on your end goal, the approach may vary.

Snap! And it's in the can

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

Just one line. Because we respect simplicity.

Selfie or not selfie

• capture="user" to let users indulge in selfie modes.
• capture="environment" to let users be the budding nature photographer.

Device and Browser Compatibility Dance

• Who's invited? Almost everyone! iOS Safari (from version 6+ onwards), Chrome for Android (from version 2.2+ onwards) and so many others.
• RSVP required for iOS 10.3 and higher with specific capture attribute for express entry.

Fallback for that Browser from the Past For those living in the yesteryear browsers who can't deal with getUserMedia(), rise from the ashes with an alternate strategy of uploading from the gallery.

Tackling advanced quests

Live Streaming to Web Apps

Live stream isn't just for video gamers. For a real-time video experience, <video> and getUserMedia() save the day.

<video autoplay></video>
<script>
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(stream => {
      const videoElement = document.querySelector('video');
      videoElement.srcObject = stream;
      // Now perform some video wizardry here
    })
    .catch(err => console.error("Stream reluctantly said no:", err));
</script>


Putting Constraints on Audio and Video

You're the captain now. Steer your media feed with constraints. Because you know best.

const constraints = {
  video: { width: 1280, height: 720, facingMode: "user" }
};
navigator.mediaDevices.getUserMedia(constraints);
// Resolution not found? Blame the pixels.


Accessing Camera in Secure Contexts

Nothing scary awaits in the deep corners, just some modern browsers and their obsession with security. So, to keep the peace, always use a secure context(HTTPS).

Seamless integration with web apps

Edit It Like It's Hot (Photo Editing and Manipulation)

The perfect picture exists, but only after modification. <canvas> and HTMLCanvasElement.toDataURL() will assist you in your creative endeavour.

Error Handling and UX design

• Communication is key. Inform the user about camera usage.
• Graceful degradation is an art. So make sure you handle errors like a pro.
• Beauty lies in the hands of the media querier. Use media queries for a bespoke camera UI/UX experience.

Power Tools (External Libraries and Tools)

For an extensive tool shed, look into reliable libraries like PhotoSwipe and WebRTC.