嵌入 iframe 中的 phonegap 相机捕获

Posted 2023-03-13

【中文标题】嵌入 iframe 中的 phonegap 相机捕获

【英文标题】：phonegap camera capture in embed iframe

【发布时间】：2014-06-08 16:29:32

【问题描述】：

我在网上拼命寻找： 如何使用 PhoneGap 访问设备的摄像头并将其放入我的 html 中，例如在一个框架中并使用我在该 HTML 中创建的自定义按钮拍摄快照。所以，不要使用设备的原生相机界面。 大多数人都说PhoneGap不可能。 有人可以提供一个全面的分步教程，说明如何在 Eclipse for android 中执行此操作，无论是 PhoneGap 还是其他方法。 非常感谢

【问题讨论】：

这可能是可能的，但您必须创建一个自定义插件才能得到您想要的。

Showing camera view inside html in android and then snap a picture的可能重复

【参考方案1】：

我在 github 上搜索时发现了这个自定义插件：

Cordova-CanvasCamera

设置安装：

将 CanvasCamera.h 和 CanvasCamera.m 复制到 PhoneGap 项目中的 Plugins 目录。 编辑您的 config.xml 并将 CanvasCamera 添加到您的插件列表中。 将 CanvasCamera.js 复制到您的 www 目录中，并在 index.html 中为其添加脚本标记。 如果尚未存在，请在项目的 Build Phases 选项卡中添加 CoreVideo.framework 库

以下是示例代码实现：

<img> 的配置：

<img id="camera"   />
<script>
  CanvasCamera.capture = function(data) 
    document.getElementById('camera').src = data;
  
</script>

<canvas> 的配置：

<canvas id="camera"  ></canvas>
<script>
    var context = document.getElementById('camera').getContext("2d");
    var camImage = new Image();
    camImage.onload = function() 
      context.drawImage(camImage, 0, 0);
    ;
    CanvasCamera.capture = function(data) 
      camImage.src = data;
    ;
</script>

开始捕捉：

<script>
  document.addEventListener("deviceready", function() 
    CanvasCamera.start();
  );
</script>

【讨论】：

有没有人知道类似的 Android 设备（甚至更好，两者都有）？