HTML5 camera capture on Android WebView in Cordova Phonegap

Question

I have built a cordova phonegap application as a prototype.
Because it's a prototype I am basically just linking to a mobile webpage doing the following in the index.html:

<script>window.location = 'http://example.com';</script>

On example.com one crucial piece of html is this:

<input name="photo" id="upload-image" type="file" accept="image/*" capture="camera" >

In the compiled phonegap app which I compile via build.phonegap.com, after downloading and running the .apk file on Android, when clicking on that file control it only opens the local file browser without camera option.

Is there a way to make this work so that it offers to launch the camera or ideally just directly launches the camera?

When I access the mobile site via Chrome from an Android it works as expected, but when running the compiled apk it seems to be using a different browser that doesn't seem to interpret the tag and its attributes as expected.

Answer 1

You are doing it all wrong. As is a phonegap application you need to implement the camera plugin to use the camera functionality.

Follow the instruction in the following link and you will be able to use the camera in your app.

http://docs.phonegap.com/en/edge/cordova_camera_camera.md.html

Answer 2

Android doesn't support accept attributes in webview.

http://caniuse.com/#feat=input-file-accept&search=Accept

Consider using Cordova Camera plugin

Answer 3

It is possible

Add crosswalk pluggin (will replace webview)

https://crosswalk-project.org/documentation/cordova.html

And add camera plugin.

Then add this code to onDeviceReady function (Just for gettiing premissions)

navigator.camera.getPicture(onSuccess, onFail, {
            quality: 50,
            destinationType: Camera.DestinationType.FILE_URI
        });

        function onSuccess(imageURI) {
            var image = document.getElementById('myImage');
            image.src = imageURI;
        }

        function onFail(message) {
            alert('Failed because: ' + message);
        }

Now This should open device camera

<input name="photo" id="upload-image" type="file" accept="image/*" capture="camera" >