Paulo Coghi Paulo Coghi - 4 months ago 36
iOS Question

Using camera on Phonegap app only with HTML input, without Camera API

Is it possible to get a photo from camera in a phonegap app only with HTML input, without Camera API?


I developed an app and encapsulated it through Phonegap (Build)

Users can submit photos using html file input. But there is no option to take a new photo from camera, only gallery and files (and any other storage app like drive or dropbox, if it is the case).

I would like to enable the camera option, but without the PhoneGap's Camera API.


I've tried the following solutions without success:

1. The "capture" attribute (from Raymond Camden post)

With this method, all you have to do is to add the "capture" attribute like this:

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

Raymond explains that with this method you don't need to use PhoneGap's Camera API since Google developed this option and showed it in a Google IO presentation and, according to Google devs and also Raymond, it works.

But.. not for me.

2. Config Phonegap to ask camera's permission (from Jorge Lizaso's question)

"Maybe the camera option is not showed up because your app doesn't have the proper permissions"

In the above question, 4 methods are mentioned to indirectly ask and receive the proper permissions to use the camera.

I have already tried methods 2 and 4 and, although my app now asks for camera permission and I allowed it properly, when I use the file input, all the options are presented (like gallery and files), but no camera.

3 (and 1). Use the latest version of webkit with Crosswalk to ensure solution #1

With the possibility of my android webview be outdated (and not compatible with solution #1), I decided to include in my app the best webview possible: the latest version of Google Chromium.

But.. no success again.

1, 2 and 3 combined

The result: no... success.


Yes, there is a solution, without the need for Cordova/PhoneGap's Camera API.

For reasons that are beyond my knowledge, the webkit used in CocoonJS (named WebView+) is far more optimized and adjusted to HTML5 apps than phonegap's Crossswalk (please, I am not related to Cocoon).

I discarded completely my Phonegap config.xml settings and tried Cocoon builder. I used the solution #1 (the capture attribute in file input) and added these plugins, via Cocoon:

<cocoon:plugin name="cordova-plugin-camera"/>
<cocoon:plugin name="cordova-plugin-media-capture"/>
<cocoon:plugin name="cordova-plugin-media"/>
<cocoon:plugin name="cordova-plugin-file"/>
<cocoon:plugin name="cordova-plugin-device"/>

It's important to note that I just installed these plugins in order to obtain the wanted permissions, but I am not using them at all.

Probably, more experienced developers will have better solutions but, for now, this is the best way I found to solve this problem.