在android中的html中显示相机视图，然后拍照答案

【问题标题】：Showing camera view inside html in android and then snap a picture在android中的html中显示相机视图，然后拍照
【发布时间】：2012-12-20 00:35:11
【问题描述】：

在我们使用 JavaScript 拍照之前，是否有在 html 中显示实时相机视图的视图（例如嵌入在 div 中）？我已经尝试过 PhoneGap，但它完全启动了一个新的相机应用程序，并且在返回之前完全离开了我的 html 网络应用程序。我需要在我的应用中嵌入一些东西

谢谢

【问题讨论】：

我也面临同样的问题，您对此有什么解决方案吗？如果您有任何解决方案，请也向我分享您的宝贵意见
@Erma Isabel：不，Erma 我没有找到解决方案
有安卓原生代码可以解决这个问题吗？？？？

标签： android ios cordova phonegap-plugins cordova-plugins

【解决方案1】：

您可以在您的 Cordova/phonegap 应用程序中安装 mbppower/CordovaCameraPreview 插件（适用于 android、ios），该插件允许通过 HTML 代码进行相机交互。这是一个非常了不起的插件.. 您可以访问以下功能：

从 HTML 代码开始相机预览。拖动预览框。设置相机颜色效果（Android和iOS），将预览框发送到HTML内容的后面，为相机预览框设置自定义位置，为预览框设置自定义大小并保持HTML交互性。

或者，如果您的应用程序符合您的要求，您也可以使用 donaldp24/CanvasCamera 插件。它在 android 和 iOS 平台上均受支持。我观察到，对于 iOS，它可以正常工作，但在 android 中它无法正常工作。

现在您也可以通过 Online PhoneGap 安装 CordovaCameraPreview 插件。所以不使用 CLI 你可以通过添加

直接使用它

<gap:plugin name="com.mbppower.camerapreview" version="0.0.8" source="plugins.cordova.io" />

在您的 config.xml 文件中创建 ApplicationTemplate.apk/.ipa。有关这方面的更多信息，您可以问我。乐意效劳。

更新日期：2017 年 10 月 10 日在那段时间它运行良好，但 donaldp24/CanvasCamera 不再维护，目前无法使用最新的 Cordova 版本构建。

【讨论】：

【解决方案2】：

您可以使用来自cordova-plugin-camera 的camera.getPicture 或来自cordova-plugin-media-capture 的navigator.device.capture.captureVideo。

var getUserMedia = navigator.getUserMedia 
        || navigator.webkitGetUserMedia 
        || navigator.mozGetUserMedia 
        || navigator.msGetUserMedia 
        || navigator.device.capture.captureVideo 
        || navigator.camera 
        || camera.getPicture;

希望对你有帮助。

【讨论】：

【解决方案3】：

我是为我的一个项目做的。查看 navigator.getUserMedia()。您可以使用网络摄像头和浏览器做很多事情，包括 AR 游戏！这里只是一个基本的例子：

HTML：

    <html>
    <head>
    </head>

    <body>
       <form><input type='button' id='snapshot' value="snapshot"/></form> 
       <video autoplay></video>
       <canvas id='canvas' width='100' height='100'></canvas> 
       <script type="text/javascript" src="findit.js"></script>
    </body>

    </html>

findit.js

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

现场演示：

A personal project

更多资源，这是我用的：

Webcam Access

更新：

如果我们的设备有前置摄像头，此解决方案仅适用于前置摄像头。它基本上是一个“网络摄像头”解决方案。不确定它是否适用于您的情况。以防万一，请查看资源。

【讨论】：

另请注意，目前getUserMedia 的支持很差。
Chrome 增加了对设备选择的支持。查看此示例simpl.info/getusermedia/sources
根据caniuse 这不起作用。该问题专门询问如何在移动应用程序/设备中获取提要，而不仅仅是浏览器。

【解决方案4】：

无法使用 javascript 直接访问相机应用程序。您可以编写一个自定义的 PhoneGap (Cordova) 插件来做到这一点。

【讨论】：

问题是关于用javascript访问相机...而不是直接访问camera app...