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

标签 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="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 打开设备前置摄像头。不会拍摄照片或录像机,只会显示前置摄像头 View 。在安装 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" />

Image that shows on device with the above code

Phonegap 版本 3.1.0 API

最佳答案

根据 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
};

关于javascript - 如何在 Phonegap 中启用前置摄像头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28139388/

相关文章:

javascript - 尝试更改 .click() 函数中另一个元素的属性

javascript - 带有双引号的 json_encode 传递到 JSON.parse

android - Delphi Seattle Android TNotificationCenter CancelAll 在触发一个通知后不起作用

android - 最新的 Android Studio 2020.3.1 在签名 APK 时未显示签名版本选项

javascript - 使用 AngularJS 1.4 像 Replaceable Tiles 一样开发 Windows?

html - Chrome 中 br 的边距

javascript - 为什么没有触发 `.catch`回调

android - 如何知道android中多选 ListView 中的复选框是否被选中?

php - 在一个 HTML 表单中创建、搜索、更新

javascript - console.log 多维数组