前端也智能？Javascript实现人脸检测(为Web应用程序添加人脸检测功能的JavaScript教程)
前端也智能？Javascript实现人脸检测
今天给大家介绍的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!!!
为Web应用程序添加人脸检测功能的JavaScript教程
今天小编将使用pico.js添加简单的头部跟踪功能，进一步增强我们的多模式界面。pico.js是一个精简的t库，与其说是生产级库不如说是概念证明，但它在我研究过的人脸检测库中似乎效果最好。今天为大家分享为Web应用程序添加人脸检测功能的JavaScript教程。
本文旨在用简单的红点开始显示覆盖在地图上的用户头部位置：
我们先创建一个包装pico.js功能的简单React类，我们可以使用该功能来获取用户人脸的位置更新：
<ReactPicoonFaceFound=(face)=>this.setState(face)/>
然后，如果检测到人脸，我们可以使用该人脸位置的细节来渲染组件：
face&&<FaceIndicatorx=face.totalXy=face.totalY/>
我们在pico.js方面遇到的第一个挑战是，它用t实现了研究项目，未必是遵循现代t标准的生产级库。除此之外，这意味着你无法执行yarnaddpicojs命令。虽然pico.js入门(https://tehnokv.com/posts/picojs-intro/)深入浅出地介绍了对象检测，但它更像是一篇研究论文，而不像API文档。不过，所附的例子足以实际使用代码。我花了几小时将所附的样本放入到一个比较简单的React类中，我们可以用这个类充分利用代码。
pico.js要做的第一件事是加载级联模型，这需要进行AJAX调用，获取对人脸预训练的模型的二进制表示。(你可以使用同一个库来跟踪其他类型的对象，但需要使用官方的pico实现来训练自定义模型。)我们可以将该模型加载代码放入到componentDidMount生命周期方法中。为了清楚起见，我进一步将示例代码抽象成另一个名为loadFaceFinder的方法：
除了获取和解析人脸检测模型的二进制表示并设置状态外，我们还创建了一个新的camvas，它引用<canvas>上下文和回调处理程序。camvas库将视频从用户的网络摄像头加载到canvas上，并为渲染的每个帧调用处理程序。loadFaceFinder的内容几乎就是pico.js提供的参考项目的相同副本。我们更改了存储模型的位置，以便可以在状态下访问。我们通过reactRef来引用canvas上下文，而不是使用浏览器提供的DOMAPI。
我们的this.processVideo也几乎与参考项目中提供的代码相同。我们只需要做几处更改。我们只想在加载模型时执行代码，于是对代码的整个主体添加了检查机制。我还使用我们预计用户传入的回调处理程序创建了这个React类，那样我们只在定义该处理程序后运行处理代码：
我所做的唯一其他更改就是发现人脸后我们执行的操作。pico.js示例在canvas上画了几个圆圈，但我们希望改而将数据传回到那个回调处理程序。不妨稍微修改一下代码，以便回调处理程序更容易处理这些值：
此格式让我们可以传回捕获的canvas元素中人脸的绝对位置和半径、canvas元素中人脸的相对位置以及canvas元素中的人脸位置。我们的定制课程基本完成。我还需要对pico.js和pico版本的camvas.js进行几处小的更改才能使用现代语法，但这些更侧重关键字而不是逻辑。
现在我们可以将自定义ReactPico类导入到我们的App中，渲染它，如果检测到人脸就有条件地渲染FaceIndicator类。我使用另外一些人脸检测库后惊讶地发现，pico.js的准确性和易用性很强，尽管它不是功能完备的库。
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 前端也智能？Javascript实现人脸检测(为Web应用程序添加人脸检测功能的JavaScript教程)
