Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Camera capture using Html5 input tag

I am using the below line of code in order to invoke camera from my web application.

<input type="file" id="capture" accept="image/*; capture=camera" style="visibility:hidden;">

Using this, I am able to get the pop up with options of "Choose existing photo" and "Take Picture", when the application is opened in iOS6. But I want to open up camera capture directly rather then getting this pop up and then select "Take Picture" option.

Thanks in advance.

like image 323
Kiara_2013 Avatar asked Mar 22 '13 05:03

Kiara_2013


People also ask

How do you capture a camera in HTML?

The capture attribute is supported on the file input type. The capture attribute takes as its value a string that specifies which camera to use for capture of image or video data, if the accept attribute indicates that the input should be of one of those types. The user-facing camera and/or microphone should be used.

How do I get the value of an input type file?

The value property returns the path or the name of the file selected with the <input type="file"> element. This property returns the name of the selected file with a fake path in IE, Google Chrome, and Opera, and the name of the selected file in Firefox and Safari.


2 Answers

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

Works in Chrome on Android (at least).

like image 195
Ian Grainger Avatar answered Sep 22 '22 00:09

Ian Grainger


I'm afraid this is not possible as per the specification for security/privacy reasons:

The user agent SHOULD NOT enable any device for media capture, such as a microphone or camera, until a user interaction giving implicit consent is completed.

http://www.w3.org/TR/capture-api/#security

An alternative is to use getUserMedia. This still shows a dialog requesting user permission but in some browsers the user can choose to hide it after granting access to a domain.

like image 44
tagawa Avatar answered Sep 23 '22 00:09

tagawa