2

我正在尝试从网络摄像头捕获视频/照片。我发现一个脚本可以正常工作，但我想仅在单击按钮时启动相机访问。使用此脚本，它将立即启动（我不想这样做）。请问如何在点击时绑定此事件？

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, 487, 365);
            });
        }, false);
4

3 回答 3

3

您需要在单击处理程序中而不是在 DOM 内容加载事件期间调用 getUserMedia。

我在您的问题中使用了代码，并对其进行了修改：

  • 使它成为整个 html 文档的一部分，以便我可以对其进行测试
  • 将启动相机的代码包装在一个名为 startCamera 的函数中
  • 添加了“启动相机”按钮。您可以通过单击快照按钮来启动相机，但这对我来说真的没有意义。
  • 为“启动相机”按钮添加了一个点击监听器，它只是执行 startCamera 函数

这是代码：

<html>
    <body>
        <canvas id="canvas"></canvas>
        <video id="video"></video>
        <button id="startCamera">Start camera</button>
        <button id="snap">Take snapshot</button>
    <script>
        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
            function startCamera() {
                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, 487, 365);
            });
            // Trigger starting the camera
            document.getElementById("startCamera").addEventListener("click", function() {
                startCamera();
            });
        }, false);
    </script>
    </body>
</html>
于 2013-10-09T21:56:55.437 回答
1

试试这个代码。也尝试从虚拟目录运行它。

<html>
<head>
<script type="text/javascript">
function doGetUserMedia() {
            // Grab elements, create settings, etc.
            var canvas = document.getElementById("canv"),
                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, 487, 365);
            });
        }
</script>
</head>
<body>
<button onclick="doGetUserMedia()">Start Camera</button>
<video id="video" width="487" height="365"></video>
<button id="snap">Take snapshot</button>
<canvas id="canv" width="487" height="365"></canvas>
</body>
</html>
于 2014-10-28T06:50:10.737 回答
0

你可以尝试这样的事情：

<html>
<head>
<script type="text/javascript">
function doGetUserMedia() {
            // 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, 487, 365);
            });
        }
</script>
</head>
<body>
<button onclick="doGetUserMedia()">Click me</button>
</body>
</html>
于 2013-06-23T16:25:45.100 回答