Question

我正在尝试从网络摄像头捕捉视频/照片。我已经创建了一个脚本工作，但我想只在按钮点击时启动相机访问。有了这个脚本，它将立即开始（我不想）。我怎么能点击这个事件点击呢？

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);

Answer 1

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

我在你的问题中提取了代码并对其进行了修改：

将其作为整个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>

Answer 2

尝试此代码。还尝试从虚拟目录运行它。

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

Answer 3

你可以尝试这样的事情：

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

getUserMedia仅限点击

3 个答案: