显示里面的Android HTML相机视图，然后拍摄照片(Showing camera view i

有展示我们捕捉使用JavaScript的图片前，里面的html直播相机视图（例如嵌入在一个div）的看法？我曾尝试PhoneGap的，但它完全启动一个新的相机应用和移动完全从我的html的web应用程序走回到它之前。我需要嵌入在我的应用程序的东西

谢谢

Answer 1:

您可以安装mbppower / CordovaCameraPreview在科尔多瓦/ 插件（于Android，iOS）的PhoneGap应用程序，允许从HTML代码相机互动。一个真正令人惊叹的插件是..你可以访问功能，例如：

从开始的HTML代码相机预览。 拖动预览框。 设置相机的色彩效果（Android和iOS），发送预览框备份中的HTML内容，设置相机预览框自定义位置，设置预览框自定义尺寸和维护HTML互动。

或者你也可以使用donaldp24 / CanvasCamera插件为你的应用是否适合在Android和iOS平台上支持你的requirements.Its。我观察到，为iOS其工作正常，但在Android中它无法正常工作。

现在，您可以通过在线的PhoneGap安装CordovaCameraPreview插件了。因此，没有使用CLI您可以通过添加直接使用它，通过这个

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

在你的config.xml文件，并创建ApplicationTemplate.apk /的.ipa。有关它的更多信息，你可以问我。乐于帮助。

UPDATE：二零一七年十月十日它曾经那段时间，但是，donaldp24 / CanvasCamera不再保持良好的工作，目前无法建立与最新版本的科尔多瓦。

Answer 2:

我是为我的项目之一。退房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); 
    }

现场演示：

一个个人项目

更多的资源，这是我用什么：

网络摄像头访问

更新：

此解决方案仅适用于前置摄像头有效的，如果我们的设备有一个。这基本上是一个“摄像头”的解决方案。不知道这是否会为你的情况下工作。为以防万一，检查出的资源。

Answer 3:

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

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

希望能帮助到你。