HTML调用摄像头拍照指南-优快云博客

本文链接：https://blog.youkuaiyun.com/a110658684/article/details/58049199

本文介绍如何使用HTML和Web API调用设备的摄像头进行拍照，适用于火狐等浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE>
<html>
    <title></title>
    <meta charset="utf-8" />
    <head></head>
    <script type="text/javascript">

        // Put event listeners into place
        window.addEventListener("DOMContentLoaded", function() {
            // Grab elements, create settings, etc.
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var video = document.getElementById('video');
            var mediaConfig =  { video: true };
            var errBack = function(e) {
                console.log('An error has occurred!', e)
            };

            // Put video listeners into place
            if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                });
            }

            /* Legacy code below! */
            else if(navigator.getUserMedia) { // Standard
                navigator.getUserMedia(mediaConfig, function(stream) {
                    video.src = stream;
                    video.play();
                }, errBack);
            } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
                navigator.webkitGetUserMedia(mediaConfig, function(stream){
                    video.src = window.webkitURL.createObjectURL(stream);
                    video.play();
                }, errBack);
            } else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
                navigator.mozGetUserMedia(mediaConfig, function(stream){
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, errBack);
            }

            // Trigger photo take
            document.getElementById('snap').addEventListener('click', function() {
                context.drawImage(video, 0, 0, 640, 480);
            });
        }, false);

    </script>
    <body>
        <video id="video" width="640" height="480" autoplay></video>
    <button id="snap" class="sexyButton">Snap Photo</button>
    <canvas id="canvas" width="640" height="480"></canvas>
    </body>
</html>