Question

我需要制作一个HTML5页面，该页面可以显示来自设备相机/网络摄像头的实时视频，并且有一个可以拍摄快照的按钮;没什么特别的（类似于html5camera.com）。我尝试了一些教程（http://www.html5rocks.com/en/tutorials/getusermedia/intro/和http://davidwalsh.name/browser-camera），但我还是HTML的新手，所以我不知道如何处理我找到的代码片段。

我将一些代码复制到HTML文件中，但是当我用Chrome打开它时，它在地址栏右侧显示它阻止了对摄像头和麦克风的访问（无需请求许可）。当我单击下一次请求权限的选项并重新加载页面时，没有任何反应。默认情况下无法将首选项设置为允许。我还尝试过Chrome Canary（与Chrome相同）和Firefox（未请求许可）。

我在HTML中犯了错误吗？ Chrome是问题吗？

到目前为止我的代码：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=yes">
    </head>
    <body>
        <video id="video" width="640" height="480" autoplay></video>
        <button id="snap">Snap Photo</button>
        <canvas id="canvas" width="640" height="480"></canvas>
        <script>
            // Put event listeners into place
            window.addEventListener("DOMContentLoaded", function() {
                // Grab elements, create settings, etc.
                var canvas = document.getElementById("canvas"),
                    context = canvas.getContext("2d"),
                    video = document.getElementById("video"),
                    videoObj = { "video": true },
                    errBack = function(error) {
                        console.log("Video capture error: ", error.code); 
                    };
                // Put video listeners into place
                if(navigator.getUserMedia) { // Standard
                    navigator.getUserMedia(videoObj, function(stream) {
                        video.src = stream;
                        video.play();
                    }, errBack);
                } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
                    navigator.webkitGetUserMedia(videoObj, function(stream){
                        video.src = window.webkitURL.createObjectURL(stream);
                        video.play();
                    }, errBack);
                }
                // Trigger photo take
                document.getElementById("snap").addEventListener("click", function() {
                    context.drawImage(video, 0, 0, 640, 480);
                });
            }, false);
        </script>
    </body>
</html>

Answer 1

你也可以考虑去原生。您可以使用BridgeIt http://bridgeit.mobi轻松地为Android，iOS或Windows Phone 8上的任何Web应用添加本机摄像头和摄像机支持。它是一个简单的javascript api，允许您访问原生移动功能。

如何在HTML5中创建简单的快照webapp？

1 个答案: