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

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

javascript android html cordova camera

Javascript 如何在Phonegap中启用前置摄像头,javascript,android,html,cordova,camera,Javascript,Android,Html,Cordova,Camera,使用HTML5和Js在网站上打开网络摄像头，代码如下 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="headBoxingStyle.css"/> </head> <body style="overflow: hidden"> <div id="headtra

使用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>


var OnFailsHard=功能（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）
{
getUserMedia（{video:true}，函数（流）{
video.src=window.URL.createObjectURL（流）；
}，onFailSoHard）；
}
document.getElementById（'snapshot'）。onclick=function（）{
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
ctx.drawImage（视频，0,0）；
}

但如何通过Phonegap打开设备前摄像头呢。不需要拍照或录像，只需显示前摄像头视图。在安装Phonegap摄像头插件的那一刻，添加了权限并测试了Phonegap上的示例代码，该代码运行良好，但上面的代码仅显示了如图中所示的播放符号

以下是权限

Phonegap版本3.1.0 API

根据Phonegap，您可以指定要打开的摄像头，或提供按钮在前后摄像头硬件之间切换

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

这里的

Camera选项

有许多属性，但您需要的是摄影机方向

 {cameraDirection:1};

在哪里

在Cordova（以前的PhoneGap）上，您无法通过

navigator.getUserMedia

获取图像（据我所知，我也无法从摄像头插件源JavaScript中找到它）。相反，您需要使用。这样，您就可以使用camera检索图像，如下所示（来自插件的文档）

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

但是，您应该注意到摄像头插件在其

任何CameradDirection值都会生成背面照片

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

列表项

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

（在app/res/xml/config.xml中）
（应用程序内/AndroidManifest）
navigator.camera.getPicture（onPhotoDataSuccess，onFail，{quality:50，cameraDirection:1，destinationType:destinationType.DATA_URL}）；}

onSuccess:

函数cameraCallback（imageData）{
var image=document.getElementById（'myImage'）；
image.src=“data:image/jpeg；base64，”+imageData；
}

摄像机方向：
摄像机方向={ 后退：0，//使用后向摄影机正面：1//使用正面摄像头 };

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

getPicture

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