Take a picture with mobile using javascript

Question

I'm looking for a way to take a picture with a phone/tablet on my website, the behavior should be :

• The user click a "camera" button.
• The mobile camera show on.
• The user take a picture
• The picture is stored into a variable for a future usage

I can't figure out how to do that, i heard that the "phonegap" framework does that but i can't use it since i'm on a MVC c# project. It seems to me that it will be hard to reproduce since i doubt that a web site have the right to launch any app from the mobile.

Is there a way to do that using javascript ? Any solution ?

Woundwort

developer.mozilla.org/en-US/docs/Web/Guide/API/Camera – Meldameldoh

Answer 1

You can use the HTML5 getUserMedia() API, which is explained in this article: http://www.html5rocks.com/en/tutorials/getusermedia/intro/

Be careful: not all browsers support this (yet). For a detailed list of supporting browsers, take a look at this page: http://caniuse.com/#feat=stream

Flummery

navigator.mediaDevices.getUserMedia is not accessible for Chrome/FF in iOS (Safari only). – Hankins

getUserMedia is not for the faint of heart and I strongly recommend that most developers use the input type="file"... solution first to see if it fits the requirements. – Georginegeorglana

Answer 2

The correct solution is to use <input type="file" ... as answered in several other stack overflow posts.

For example, if you want to just have the built-in camera app get launched, just create element:

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

You can use the 'file' input as-is or you can hide it and launch it from another button you can hide the input element and call it from javascript (eg jQuery: $('#inpTakePhoto#').click()). Note, that the event must be triggered by the user and cannot be fired automatically as it will likely get blocked for security reasons.

The input - file control can be configured to use just the camera or even allow user to select from other sources by using the multiple flag. Its very powerful and easy to use.

For the record, I went down the rabbit hole of getUserMedia and this is definitely not the correct answer for most people. getUserMedia is really for developers who want to develop an end-to-end camera app. It requires that the developer implement all the main camera features like pinch zoom, switch camera, and I'm not even sure if the flash settings can get accessed.

Georginegeorglana