How to Access a Mobile'S Camera from a Web App

How can I open camera on mobile phone on a web app?

Taking a look at https://developers.google.com/web/fundamentals/media/capturing-images/ you can find a warning as follows:

So no. The only way to 'solve' your problem is to use HTTPS.

Open mobile camera by clicking a button through web browser

With an input[type="file"] field you can pick a file, or ask the device to record a media. It will always open an app or a prompt to choose an app. If you want to stay in the browser you need to use the MediaStream Recording API but it is not fully supported yet. For now, it is not working in iOS so either way, you have to open up the default camera app.

If you want to take photos you can try the MediaStream Image Capture API. But it is still just an experimental technology which won't work in most of the current browsers.

You can find some examples here:

• Taking still photos with WebRTC - MDN
• ImageCapture.takePhoto - MDN
• Take Photos and Control Camera Settings - Google developers
• Access the camera interactively - Google developers

I hope the links above can help you

How to access camera on iOS11 home screen web app?

We have quite similar problem. So far the only workaround we were able to do is to remove the meta tag for it to be "apple-mobile-web-app-capable" and let users to open it in Safari, where everything seems to work normally.

Access mobile camera from HTML/Angular application

You should be able to select between the front and rear camera using the capture attribute.

For the rear camera:

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

For the front camera, you should be able to use: capture="user" or just capture.

You can read a bit more about it here if you'd like: https://developers.google.com/web/fundamentals/media/capturing-images/

---

Related Topics