如何使用tracking.js页面人脸识别插件

这篇文章主要讲解了如何使用tracking.js页面人脸识别插件,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

tracking.js是页面识别人脸的一个插件,首先是tracking.js的git地址

在下载完tracking.js后,我们需要一个能测试的页面,这个页面需要在服务器上,比如本地的localHost: 8080,然后需要引入两个检查人脸必须的文件tracking-min.js和face-min。js。”

 var视频=. getelementbyid(& # 39;视频# 39;);
　　画布var=. getelementbyid(& # 39;帆布# 39;);
　　var=canvas.getContext上下文(& # 39;2 d # 39;);
　　var追踪=new tracking.ObjectTracker(& # 39;面对# 39;);
　　tracker.setInitialScale (4);
　　tracker.setStepSize (2);
　　tracker.setEdgesDensity (0.1);
　　
　　tracking.track(& # 39; #视频# 39;,追踪,{相机:真});
　　
　　tracker.on(& # 39;跟踪# 39;,函数(事件){
　　上下文。clearRect(0, 0,画布。宽度,canvas.height);
　　
　　event.data.forEach(函数(矩形){
　　上下文。strokeStyle=& # 39; # a64ceb& # 39;;
　　context.strokeRect(矩形。x rect.y rect.width rect.height);
　　上下文。11 px helvetica字体=& # 39;# 39;;
　　上下文。fillStyle=? fff";
　　context.fillText (& # 39; x: & # 39;+ rect.x + & # 39; px # 39;, rect.x + rect.width + 5, rect.y + 11);
　　context.fillText (& # 39; y: & # 39;+ rect.y + & # 39; px # 39;, rect.x + rect.width + 5, rect.y + 22);
　　});
　　});' 

上面这些事主要的人脸检测使用代码其中:

tracker.setInitialScale (4);
tracker.setStepSize (2);
tracker.setEdgesDensity (0.1);

这些是设置的参数,文档中没有明确的说明,暂时不知道用处。可以通过tracker.stop()来停止页面对人脸的监听。

如果是要监听摄像头的人像就必须判断浏览器是否支持接入摄像头,其中最主要的方法是导航器。getUserMedia,具体的说明参考这里。在获取摄像头之后就可以监听摄像头,判断是否有人的脸,在跟踪事件中就可以截取需要的图片。

具体的截取方法:

画布var=$(& # 39;帆布# 39;),
　　上下文=canvas.getContext (& # 39; 2 d # 39;),
　　视频=$ & # 39;视频# 39;);
　　上下文。drawImage(视频,0,0,200,150);
　　var snapData=canvas.toDataURL(& # 39;图像/png # 39;),
　　var imgSrc=笆?图像/png;“+ snapData; 

imgSrc可以直接用于页面图片的显示。

看完上述内容,是不是对如何使用tracking.js页面人脸识别插件有进一步的了解,如果还想学习更多内容,欢迎关注行业资讯频道。

如何使用tracking.js页面人脸识别插件