Cordova Phonegap 中 Android WebView 上的 HTML5 摄像头捕获答案

【问题标题】：HTML5 camera capture on Android WebView in Cordova PhonegapCordova Phonegap 中 Android WebView 上的 HTML5 摄像头捕获
【发布时间】：2016-04-02 23:44:02
【问题描述】：

我已经构建了一个 cordova phonegap 应用程序作为原型。
因为它是一个原型，所以我基本上只是链接到一个移动网页，在 index.html 中执行以下操作：

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

在 example.com 上，一个关键的 html 是这样的：

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

在我通过 build.phonegap.com 编译的已编译 phonegap 应用程序中，在 Android 上下载并运行 .apk 文件后，单击该文件控件时，它只会打开本地文件浏览器，而没有相机选项。

有没有办法让它工作，以便它提供启动相机或理想情况下直接启动相机？

当我通过 Chrome 从 Android 访问移动网站时，它按预期工作，但在运行编译后的 apk 时，它似乎使用了不同的浏览器，似乎无法按预期解释标签及其属性。

【问题讨论】：

它是cordova 应用程序还是您在webview 中调用url？
您是否在您的 Cordova 应用清单中添加了摄像头权限？
我在 webview 中调用 URL（虽然在 cordova 应用程序中）。
不，我没有在我的科尔多瓦应用清单中添加相机权限。我该怎么做？
你必须在AndroidManifest.xml中添加这个权限<uses-permission android:name="android.permission.CAMERA" />。

标签： android html cordova webview phonegap-build

【解决方案1】：

你做错了。作为 phonegap 应用程序，您需要实现相机插件才能使用相机功能。

按照以下链接中的说明，您将能够在您的应用中使用相机。

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

【讨论】：

【解决方案2】：

Android 不支持 webview 中的接受属性。

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

考虑使用 Cordova 相机插件

【讨论】：

【解决方案3】：

有可能

添加人行横道插件（将取代webview）

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

并添加相机插件。

然后将此代码添加到 onDeviceReady 函数（仅用于获取权限）

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);
        }

现在这应该会打开设备相机

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

【讨论】：