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

Question

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

Scenario

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.

Solutions

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.

Answer 1

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.