HTML5: Camera Access

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

Safari & Chrome on iOS 6+ and Android 2.2+ support HTML Media Capture which allows you to take pictures with your device's camera or select an existing one:

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

Here's how it works on iOS 10:

Android 3.0+ and Safari on iOS10.3+ also support the capture attribute which is used to jump straight to the camera.

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

capture="camera" (String) and accept="image/*;capture=camera" (Parameter) were part of old specs and were replaced by capture (Boolean) the W3C Candidate Recommendation.

Support documentation: this 2013 O'Reilly book and my testing

HTML5 Camera access not working in Microsoft Edge

I tried the Photo Capture using webcam demo on Edge and it is working quite fine. you can check the below screenshot.
You need to use navigator.mediaDevices.getUserMedia. Even though Chrome 45 has navigator.mediaDevices and a getUserMedia function which returns a Promise, it does not accept spec-style constraints.

Note: Make sure to turn on the Camera setting "Let apps use my
camera" and from the list of apps that can use your camera turn on Microsoft Edge as well.

How can I access iPhone or Android camera using HTML5?

I don't think this is possible. At least, in the current state, HTML5 cannot access the camera (or other peripherals). An alternative would be to create a PhoneGap application, where you can develop the app in HTML5 (which will be wrapped into a native application), with additional libraries (JS) which let you access these.

More info on PhoneGap: http://phonegap.com/start
Camera api on PhoneGap: http://docs.phonegap.com/en/1.0.0/phonegap_camera_camera.md.html

---

Related Topics