如何在 Phonegap 中启用前置摄像头答案

【问题标题】：How to enable front camera in Phonegap如何在 Phonegap 中启用前置摄像头
【发布时间】：2015-01-25 17:39:13
【问题描述】：

使用 HTML5 & Js 使用以下代码在网站上打开网络摄像头。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="headBoxingStyle.css"/>
  </head>
  <body style="overflow: hidden">
    <div id="headtrack"></div>
    <canvas id='canvas' width='100' height='100'></canvas>
    <video width="100" height="100"></video>
  </body>
</html>

<script type="text/javascript">
var onFailSoHard = function(e)
{
    console.log('failed',e);
}

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia ||  navigator.webkitGetUserMedia;

var video = document.querySelector('video');

if(navigator.getUserMedia)
{
  navigator.getUserMedia({video: true},function(stream) {
    video.src = window.URL.createObjectURL(stream);
  }, onFailSoHard);
}

document.getElementById('snapshot').onclick = function() { 
  var canvas = document.getElementById('canvas'); 
  var ctx = canvas.getContext('2d'); 
  ctx.drawImage(video,0,0); 
} 
</script>

但是如何通过 Phonegap 打开设备前置摄像头。不会拍摄照片或录像机，而只会显示前置摄像头视图。在安装Phonegap相机插件的那一刻，添加权限并测试Phonegap上的示例代码可以正常工作，但上面的代码仅显示如图所示的播放符号。

这里是权限

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera"android:required="false" />
<uses-feature android:name="android.hardware.camera.front" android:required="false" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Phonegap 版本 3.1.0 API

【问题讨论】：

您使用的是哪个插件 API？捕捉还是媒体？
Phonegap 版本 3.1.0

标签： javascript android html cordova camera

【解决方案1】：

根据Phonegap documentation，您可以指定打开哪个摄像头或提供一个按钮来切换前后摄像头硬件

navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

这里cameraOptions有很多属性，但是你需要的是Camera Direction

 {cameraDirection:1};

在哪里

Camera.Direction = {
    BACK : 0,      // Use the back-facing camera
    FRONT : 1      // Use the front-facing camera
};

【讨论】：

您在哪里初始化相机？这些是必须传递给getPicture 方法才能打开前置摄像头的参数。
The documentation also says that Android ignores this flag and always uses the back cam. Android 有什么解决方案吗？
你总是可以为 phonegap 编写你自己的原生模块，而且大多数时候这个东西工作，这就是为什么它被称为 "quirks"
以上代码不适用于我的三星 Galaxy S5。
自发布答案以来已经两年了。当然，他们已经改变了 SDK 中的一些内容。

【解决方案2】：

在 Cordova（以前称为 PhoneGap）上，您无法通过 navigator.getUserMedia 获取图像（据我所知，我也无法从相机插件源 JavaScript 中找到它）。相反，您需要使用Camera plugins API。这样您就可以使用相机来检索图像，如下所示（来自插件的文档）

navigator.camera.getPicture(onSuccess, onFail, { 
  destinationType: Camera.DestinationType.FILE_URI
  cameraDirection: Camera.Direction.FRONT // or Camera.Direction.BACK for back camera
});

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

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

where参数destinationType用于判断成功回调是用Base64编码的数据调用还是用图片的URI调用。正如options section 中所述，您可以使用 cameraDirection 选项选择相机方向，如示例所示。

但是，您应该注意到相机插件在其Android quirks 中说明了这一点

任何 cameraDirection 值都会生成背面照片。

不幸的是，使用此插件，无法以编程方式将摄像头设置为前置摄像头。

【讨论】：

你将如何在上面的代码中实现它？无需拍照或录像，只需打开前置摄像头
我不同意这一点。 getusermedia 在 IOS 中使用 cordova 工作得很好。它也可以在 android 上运行，为您提供人行横道部署。
@Lee2808 我不认为提问者使用了 Crosswalk，问题是关于 Android 的？默认情况下不使用人行横道，并且在某些情况下它不合适，因此不应假定使用它。
@RoopeHakulinen 同意没有提到人行横道 - 我个人看不到除了需要在（真的）低规格设备上运行但您不会使用它的用例。我为未来的读者发表了评论，如果他们不想在 android 上使用相机插件，那么在 android 上有一个可行的替代方案。我的措辞过于强烈，无法回应您的回答！

【解决方案3】：

@RoopeHakulinen：我在 Cordova android 应用程序中使用了 getusermedia，但也没有使用 Crosswalk。不过，我也必须在我的 config.xml 中添加以下内容，以使相机权限起作用。

 xmlns:android="http://schemas.android.com/apk/res/android" in the widget tag.

然后

<config-file mode="merge" parent="/*" target="app/src/main/AndroidManifest.xml">
        <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
        <uses-permission android:name="android.permission.CAMERA" />
        <uses-feature android:name="android.hardware.camera" />
        <uses-feature android:name="android.hardware.camera.autofocus" />
        <uses-permission android:name="android.permission.RECORD_AUDIO" />           
</config-file>

我还使用了权限插件，在开始时（在启动时）本身授权相机权限，而不是稍后请求权限。

<plugin name="cordova-plugin-android-permissions" spec="^1.0.0" />

【讨论】：

【解决方案4】：

列表项

为 ANDROID 设置这个：

(in app/res/xml/config.xml)
<feature name="Camera">
    <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
</feature>


(in app/AndroidManifest)
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, cameraDirection:1, destinationType:        destinationType.DATA_URL}); }

onSuccess :function cameraCallback(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData; }
相机方向：

Camera.Direction = { BACK : 0, // 使用后置摄像头 FRONT : 1 // 使用前置摄像头 };

【讨论】：