How to access camera on iOS11 home screen web app?

web-development

webRTC

camera-access

ios11

byAlex Kataev·Feb 14, 2025

To grant your iOS 11 home screen web app access to the camera, use an <input> tag with type="file" and capture="camera" attributes. This tag will prompt the camera to turn on when a user interacts with the input field. A quick code snippet here:

<!-- Here's looking at you, camera! -->
<input type="file" accept="image/*" capture="camera">

Remember: The above HTML input element directly invokes the device's camera interface—no need for additional code. Always make sure your web app efficiently manages sessions in standalone mode—it's all about giving users a smooth ride!

Being ingenious with iOS versions and updates

Apple doesn't always make it easy for web developers to play nice with its camera access on home screen web apps. Here's how to tango with the Cupertino giant's changing rules:

Navigating iOS updates, with a nod to Safari

In the world of Apple, Safari is king. If you're set on taming the iOS beast, testing camera functionality with a Safari tab should be your first port of call before planting your web app on the home screen.

Become a WebRTC whisperer

If WebRTC restrictions are tripping you up, use frameworks like Apache Cordova or equivalent. They'll help you keep a firm grip on camera access across different web views. Navigator.mediaDevices undefined in your app? You're not alone, even the best of us once faced this snag!

Play by the `manifest.json` rules

A properly configured manifest.json can be the knight in shining armor, granting your web app the right permissions it needs to wield WebRTC in iOS. Be prepared for a bit of trial and error here. As the old saying goes, "If at first you don't succeed, try, try again!"

Thanks to iOS 11.3, <input type ="file"> has become a quick and reliable fix for accessing the camera on a home screen web app—in the words of Apple: "Think Different", but Also standby for Apple's software updates as they may further streamline camera access. You're in luck if your user's devices are powered by iOS 13: it resolves camera access issues!

Seize the camera reigns with file handling

Serve your web app files from a website accessible by the phone. Your camera function will remain stable and reliable, no matter what iOS version gets thrown your way.

Tips and workarounds: setting you up for success

The trusty fallback: file input

If you're handling older iOS versions or experiencing technical glitches, don't sweat! Bring in the wave of the all-loved input mechanism.

Detaching the apple-mobile-web-app-capable meta tag

Sometimes, the apple-mobile-web-app-capable meta tag can be a party pooper and block camera access. When in doubt, cut it out (temporarily)!

Testing is key!

Make testing a ritual! Different devices, iOS versions—the whole shebang. Pro tip: Use a GitHub demo as a reference point. They say charity begins at home, but for us developers, it's testing!