Tracking.js 是一个独立的JavaScript库,用于实时跟踪从相机接收的数据。通过检测特定颜色或人体/脸部的出现与移动,可以触发JavaScript事件。
1、CDN链接
Tracking.js:https://cdnjs.cloudflare.com/ajax/libs/tracking.js/1.1.6/tracking-min.js
Face Tracker:https://cdnjs.cloudflare.com/ajax/libs/tracking.js/1.1.6/data/face-min.js
2、基本介绍
tracking.js是一个独立的JavaScript库,用于跟踪从相机实时收到的数据,通过使用现代HTML5规范,可以实现实时颜色跟踪、面部检测等功能。
3、主要功能
实时颜色跟踪:能够识别特定颜色并进行跟踪。
面部检测:可以检测和跟踪人脸,适用于人脸识别等应用。
事件触发:在检测到目标或未检测到目标时触发相应的事件,如onFound
和onNotFound
。
4、示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tracking.js Example</title> <style> #video { margin-left: 230px; margin-top: 120px; position: absolute; } canvas { margin-left: 230px; margin-top: 120px; position: absolute; } </style> </head> <body> <div class="demo-frame"> <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> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/tracking.js/1.1.6/tracking-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tracking.js/1.1.6/data/face-min.js"></script> <script> var video = document.getElementById('video'); var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var tracker = new tracking.ObjectTracker(['face']); tracker.setStepSize(1.7); tracking.track('#video', tracker); tracker.on('track', function (event) { context.clearRect(0, 0, canvas.width, canvas.height); event.data.forEach(function (rect) { context.strokeStyle = '#a64ceb'; context.strokeRect(rect.x, rect.y, rect.width, rect.height); }); }); </script> </body> </html>
tracking.js是一个功能强大且易于使用的JavaScript库,适用于各种计算机视觉应用,通过其CDN链接,可以轻松地在项目中引入并使用该库。