tracking实现颜色追踪、人脸检测效果

代码语言:html

所属分类:其他

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
    <script src="http://repo.bfw.wiki/bfwrepo/js/vconsole.min.js"></script>


    <meta charset="utf-8">
    <title>tracking.js - color with video</title>

    <script id="bfwone" data="dep=tracking-min|dat.gui.min|stats.min|color_camera_gui&amp;err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>

    <script type="text/javascript">
        bready(function() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');

            tracking.ColorTracker.registerColor('purple', function(r, g, b) {
                var dx = r - 120;
                var dy = g - 60;
                var dz = b - 210;

                if ((b - g) >= 100 && (r - g) >= 60) {
                    return true;
                }
                return dx * dx + dy * dy + dz * dz < 3500;
            });

            var tracker = new tracking.ColorTracker(['yellow', 'purple']);
            tracker.setMinDimension(5);

            tracking.track('#video', tracker);

            tracker.on('track', function(event) {
                context.clearRect(0, 0, canvas.width, canvas.height);

                event.data.forEach(function(rect) {
                    if (rect.color === 'custom') {
                        rect.color = tracker.customColor;
                    }

                    context.strokeStyle = rect.color;
                    context.strokeRect(rect.x, rect.y, rect.width, rect.height);
                    context.font = '11px Helvetica';
                    context.fillStyle = "#fff";
                    context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
                    context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
                });
            });

            initGUIControllers(tracker);
        });
    </script>
    <style>
        .demo-.........完整代码请登录后点击上方下载按钮下载查看

网友评论0