tracking.js示例 - 浏览器中检测摄像头中的人脸自动拍照并提示保存到本地

今天药忘吃喽~ 2023-10-02 11:32 23阅读 0赞

<!doctype html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <title>demo</title>
    
            <script src="./build/tracking-min.js"></script>
            <script src="./build/data/face-min.js"></script>
            <style>
                video,
                canvas {
                    position: absolute;
                }
    
    
    
            </style>
        </head>
    
        <body>
    
            <div class="demo-container">
                <video id="video" width="320" height="240" preload autoplay loop muted></video>
                <canvas id="canvas" width="320" height="240"></canvas>
    
            </div>
    
    
            <script>
                window.onload = function () {
                    // 视频显示
                    var video = document.getElementById('video');
                    //   绘图
                    var canvas = document.getElementById('canvas');
                    var context = canvas.getContext('2d');
    
    
                    var time = 10000;
                    var tracker = new tracking.ObjectTracker('face');
                    //   设置识别的放大比例
                    tracker.setInitialScale(4);
                    //   设置步长
                    tracker.setStepSize(2);
                    //   边缘密度
                    tracker.setEdgesDensity(0.1);
    
                    //   启动摄像头，并且识别视频内容
                    var trackerTask = tracking.track('#video', tracker, {
                        camera: true
                    });
    
                    var flag = true;
                    tracker.on('track', function (event) {
                        if (event.data.length === 0) {
                            context.clearRect(0, 0, canvas.width, canvas.height);
                        } else {
                            context.clearRect(0, 0, canvas.width, canvas.height);
                            event.data.forEach(function (rect) {
                                context.strokeStyle = '#ff0000';
                                context.strokeRect(rect.x, rect.y, rect.width, rect.height);
                                context.fillStyle = "#ff0000";
                                //console.log(rect.x, rect.width, rect.y, rect.height);
                            });
                            if (flag) {
                                console.log("拍照");
                                context.drawImage(video, 0, 0, 320, 240);
    
                                saveAsLocalImage();
                                context.clearRect(0, 0, canvas.width, canvas.height);
                                flag = false;
                                setTimeout(function () {
                                    flag = true;
                                }, time);
                            } else {
                                //console.log("冷却中");
                            }
                        }
                    });
    
    
                };
                function saveAsLocalImage() {
                    var myCanvas = document.getElementById("canvas");
                    // here is the most important part because if you dont replace you will get a DOM 18 exception.  
                    // var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");  
                    var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                    // window.location.href = image; // it will save locally  
                    // create temporary link  
                    var tmpLink = document.createElement('a');
                    tmpLink.download = 'image.png'; // set the name of the download file 
                    tmpLink.href = image;
    
                    // temporarily add link to body and initiate the download  
                    document.body.appendChild(tmpLink);
                    tmpLink.click();
                    document.body.removeChild(tmpLink);
                }
    
            </script>
    
        </body>
    
    </html>