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>

　　

Tips:

　　需要环境：

　　1、可能需要 HTTPS协议

　　2、iPhone 可能需要IOS10以上、使用Safari浏览器才可调用

posted @ 2022-08-15 14:28  假装空白  阅读(499)  评论(0)    收藏  举报