How to Open Phone Camera Using HTML?

Hello friends, if you are working on a mobile device project and you want to capture a photo or video of a user by accessing their phone camera?

So you are at the right place. In this trick, I will show you how you can open the phone camera using the HTML tag.

Open Users Phone’s Camera Using HTML

To open the phone device camera using HTML, you have to make an input type field with some special attributes. Those attributes will allow opening the user’s mobile device camera instead of selecting an image or video.

Attributes:

type: file => used to select the image or video
capture: environment | user => used to capture the image or video
accept: image | video => used to allow image or video

So these attributes in <input> tag will allow to capture the image or video using the capture attribute and accept the image or video using the accept attribute. And default behavior will kept uploading the file with type attribute.

To open back facing camera to capture the image

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

To open back facing camera to capture a video

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

Note: In the above lines of code we used the /* which means that it will accept any type of image or video captured through any mobile device.

See Also: How to Redirect and Refresh Page Using HTML?

See Also: How to Disable right click on Website Using HTML?

Being Tricky 😉