HTML 引用 tracking.js 调取摄像头取人脸 Demo

目录

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>基于tracking的取人脸</title>
    <script src="static/js/util/jquery.min.js"></script>
    <script src="static/js/util/tracking-min.js"></script>
    <script src="static/js/util/face-min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
 
        video, #canvas{
            position: absolute;
            width: 581px;
            height: 436px;
        }
 
        .container {
            position: relative;
            width: 581px;
            height: 436px;
        }
    </style>
</head>
<body>
<div class="container">
    <video id="video" autoplay loop muted playsinline webkit-playsinline="true"></video>
    <canvas id="canvas" width="581" height="436"></canvas>
</div>
<script>
    window.onload = function () {
        var video = document.getElementById('video');
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
 
        var tracker = new tracking.ObjectTracker('face');
        tracker.setInitialScale(4);
        tracker.setStepSize(2);
        tracker.setEdgesDensity(0.1);
        tracking.track('#video', tracker, {camera: true});
 
        tracker.on('track', function (event) {
            context.clearRect(0, 0, canvas.width, canvas.height);
 
            event.data.forEach(function (rect) {
                context.strokeStyle = '#fff';
                context.strokeRect(rect.x, rect.y, rect.width, rect.height);
                context.fillStyle = "#fff";
            });
        });
    };
 
</script>
 
</body>
</html>