tracking-min.js 人脸检测、颜色追踪 js插件-BFW插件库

tracking-min.js 人脸检测、颜色追踪 js插件

racking-min.js 人脸检测、颜色追踪 js插件

tracking-min.js 人脸检测、颜色追踪 js插件，可用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发JavaScript 事件。它是非常易于使用的API，具有数个方法和事件

第一步引入bfwone，加载相关插件

第二步执行插件代码

示例如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tracking.js</title>
    <script id="bfwone" data="dep=tracking-min|face-min|eye-min|mouth-min&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
             var img = document.getElementById('img');

      var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);
      tracker.setStepSize(1.7);

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

      tracker.on('track', function(event) {
        event.data.forEach(function(rect) {
          window.plot(rect.x, rect.y, rect.width, rect.height);
        });
      });

      window.plot = function(x, y, w, h) {
        var rect = document.createElement('div');
        document.querySelector('.demo-container').appendChild(rect);
        rect.classList.add('rect');
        rect.style.width = w + 'px';
        rect.style.height = h + 'px';
        rect.style.left = (img.offsetLeft + x) + 'px';
        rect.style.top = (img.offsetTop + y) + 'px';
      };
        });
    </script>
<style>
  .rect {
    border: 2px solid #a64ceb;
    left: -1000px;
    position: absolute;
    top: -1000px;
  }

  #img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -173px 0 0 -300px;
  }
  </style>
</head>
<body>
<div class="demo-frame">
<div class="demo-container">
<img id="img" src="../asset/man.png" />
</div>
</div>

</body>
</html>

官网 https://trackingjs.com/