1

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

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

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

我到目前为止的代码：

<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>
4

1 回答 1

0

你也可以考虑只做本地人。您可以使用 BridgeIt 轻松地将本地相机和摄像机支持添加到 Android、iOS 或 Windows Phone 8 上的任何 Web 应用程序：http: //bridgeit.mobi。这是一个简单的 javascript api，可让您访问本机移动功能。

于 2014-03-21T17:46:01.463 回答