使用 HTML5 canvas在video之上重叠位置控制摄像头摄像和拍照和清除canvas

以你之姓@ 2023-10-02 11:08 11阅读 0赞

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <style>
                .container {
                    margin: 0 auto;
                    position: relative;
                }
                .video {
                    width: 640;
                    height: 480;
                    position: fixed;
                    top: 100;
                    left: 100;
                }
    
                .canvas {
                    width: 640;
                    height: 480;
                    position: fixed;
                    top: 100;
                    left: 100;
                    z-index: 10;
                }
    
            </style>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <meta name="generator" content="PSPad editor, www.pspad.com">
            <title></title>
        </head>
        <body>
            <button id="snap">Snap Photo</button>
            <button id="clear">Clear Photo</button>
            <div class="container">
                <video class="video" id="video" width="640" height="480" autoplay></video>    
                <canvas class="canvas" id="canvas" width="640" height="480"></canvas>
            </div>
            <script type="text/javascript">
    
                // Grab elements, create settings, etc.
                var video = document.getElementById('video');
    
                // Get access to the camera!
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                    // Not adding `{ audio: true }` since we only want video now
                    navigator.mediaDevices.getUserMedia({video: true}).then(function (stream) {
                        //video.src = window.URL.createObjectURL(stream);
                        video.srcObject = stream;
                        video.play();
                    });
                }
    
                /* Legacy code below: getUserMedia 
                 else if(navigator.getUserMedia) { // Standard
                 navigator.getUserMedia({ video: true }, function(stream) {
                 video.src = stream;
                 video.play();
                 }, errBack);
                 } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
                 navigator.webkitGetUserMedia({ video: true }, function(stream){
                 video.src = window.webkitURL.createObjectURL(stream);
                 video.play();
                 }, errBack);
                 } else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
                 navigator.mozGetUserMedia({ video: true }, function(stream){
                 video.srcObject = stream;
                 video.play();
                 }, errBack);
                 }
                 */
    
                // Elements for taking the snapshot
                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');
                //context.globalAlpha = 0.5;
                context.fillStyle = 'rgba(255, 255, 255, 0)';
    
                var video = document.getElementById('video');
    
                // Trigger photo take
                document.getElementById("snap").addEventListener("click", function () {
                    context.drawImage(video, 0, 0, 640, 480);
                });
                // Trigger photo clear
                document.getElementById("clear").addEventListener("click", function () {
                    context.clearRect(0, 0, canvas.width, canvas.height);
                });
    
            </script>
        </body>
    </html>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/20211008134120153.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16