13

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

谢谢

4

4 回答 4

13

您可以在您的 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 版本构建。

于 2015-04-21T05:00:20.067 回答
4

我是为我的一个项目做的。查看 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); 
    }

现场演示：

个人项目

更多资源，这是我使用的：

网络摄像头访问

更新：

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

于 2013-01-05T21:24:03.270 回答
0

您可以使用camera.getPicturefromcordova-plugin-camera或navigator.device.capture.captureVideofrom cordova-plugin-media-capture。

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

希望能帮助到你。

于 2017-09-06T09:25:27.840 回答
-1

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

于 2013-01-05T21:07:38.677 回答