Products
GG网络技术分享 2025-03-18 16:14 0
今天给大家介绍的tracking.js库带来不同的计算机视觉算法和技术，在浏览器环境。通过使用现代的HTML5规范，我们让你做实时色彩跟踪，人脸检测以及更多，小伙伴们终于可以发挥自己无限的想象力了。
下面是一些效果图。
这个游戏 呢 是开启摄像头后，根据玩家头的转向进行控制的，非常有意思。
虽然看上去挺高深的但是使用起来却很方便。
第1步：创建示例文件
在此步骤中，您将创建下示例文件examples/夹到您解压的本地驱动器下的项目。进入该目录，并创建一个名为在你喜欢的编辑器文件。起始文件看起来像这样：first_tracking.html
<!doctype html><html><head>
<meta charset=\"utf-8\">
<title>tracking.js - first tracking</title>
<script src=\"../build/tracking-min.js\"></script></head><body>
<script>
// Start tracking here...
</script></body></html>
步骤2：选择需要的功能
现在，你有示例文件创建的，它的时间来选择你要在行动中看到什么技术。有此页面上提供了几个例子，第一个，的跟踪，仅仅是一个抽象类的其他跟踪技术基础，不能被实例化。一个很好的选择下手的是ColorTracker，复制本部分提供的片段，并贴到您的示例文件，它到底应该是这个样子：first_tracking.html
<!doctype html><html><head>
<meta charset=\"utf-8\">
<title>tracking.js - first tracking</title>
<script src=\"../build/tracking-min.js\"></script></head><body>
<video id=\"myVideo\" width=\"400\" height=\"300\" preload autoplay loop muted></video>
<script>
var colors = new tracking.ColorTracker([\'magenta\', \'cyan\', \'yellow\']);
colors.on(\'track\', function(event) {
if (event.data.length === 0) { // No colors were detected in this frame.
} else {
event.data.forEach(function(rect) {
console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
});
}
});
tracking.track(\'#myVideo\', colors); </script></body></html>
这个例子会要求你出现在它的前置摄像头和跟踪品红，青色和黄色。看看你的周围，抓住这些颜色中的一种匹配的任何对象，看你的浏览器的控制台，它应该显示所有找到的对象的坐标。
项目的官网是：https://trackingjs.com/docs.html#introduction
或者直接用github搜tracking.
就这么多，enjoy it!!!
找到的一个可以用于人脸识别的JavaScript程序包是Face Detection，它是由Jay Salvat和Liu Liu开发的。它是一个标准的jQuery插件，通过对提供的图片进行分析，返回所有找到的脸部图像的坐标。下面我们来看看它是如何使用的！
jQuery.faceDetection
使用Face Detection这个jQuery plugin，你需要引入四个js文件：
| <script src=\"jquery-1.4.3.min.js\"></script> <!-- mas js --> <script src=\"facedetection/ccv.js\"></script> <script src=\"facedetection/face.js\"></script> <script src=\"jquery.facedetection.js\"></script> |
这个脸部识别插件的头两个文件里是它的各种功能性程序，通过它们能得到一个数组对象，这些对象里存储的就是图片里的脸部坐标信息。下面是一个例子：
| var coords = jQuery(\"#myImage\").faceDetection(); /* 返回： { x: 525 y: 435, width: 144, height: 144, positionX: 532.6353328125226, positionY: 443.240976080536, offsetX: 532.6353328125226, offsetY: 443.240976080536, confidence: 12.93120119, neighbour: undefined, } */ |
你还可以在检测方法上加入事件回调函数：
| var coords = jQuery(\"#myImage\").faceDetection({ complete: function(image, coords) { // Do something }, error: function() { console.warn(\"无法分析图片\"); } }); |
对于识别出的脸部信息，你可以做任何的处理东西。你可以在图片中脸部的位置画出框线：
| jQuery(\"img\").each(function() { var img = this; // 获取脸部坐标 var coordinates = jQuery(img).faceDetection(); // 在脸上画出框线 if(coordinates.length) { coordinates.forEach(function(coord) { jQuery(\"<p>\", { css: { position: \"absolute\", left: coord.positionX + 5 + \"px\", top: coord.positionY + 5 + \"px\", width: coord.width + \"px\", height: coord.height + \"px\", border: \"3px solid white\" } }).appendTo(img.parentNode); }); } }); |
这很简单，当然你可以做复杂的处理，比如说提取出来，这是一个很简单的脚本技术，而且没有任何技术是十全十美的。这个脸部识别插件并不具有脸部比较功能，你需要用其它方法并提供面部特征信息实现此功能。总之，相当不错，强烈建议你试一下。
以上就是聊聊JavaScript人脸识别技术的详细内容，更多请关注网站的其它相关文章！
Demand feedback
