Question

使用HTML5＆amp; amp ;;在网站上打开网络摄像头使用以下代码的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上的示例代码，该代码工作正常，但上面的代码只显示了图片中的Play符号。

以下是权限

<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" />

Image that shows on device with the above code

Phonegap 3.1.0 API

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

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

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

但是，您应该注意到相机插件在其Android quirks中告知

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

很遗憾，使用此插件时，无法以编程方式将相机设置为前一个。

Answer 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" />

Answer 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 //使用前置摄像头 };

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

4 个答案: