一.定义

1.先定义window的属性，要用的全局对象

2.继承属性

2.初始化用户媒体

3.测试对象是否为DOM节点

4.测试对象是否为“window”对象

5.使用'document.queryselector'从css3选择器中选择一个dom节点

6.追踪器

7.追踪画布

8.追踪画布内部

9.追踪图像

10.追踪视频

二.各自方法

1.事件发射器实用程序

5.维奥拉·琼斯实用程序

12.TrackerTask实用程序

14.对象跟踪器实用程序

三.使用

四.问题

一.定义

1.先定义window的属性，要用的全局对象

2.继承属性

将原型方法从一个构造函数继承到另一个构造函数。

参数是子项、父项

定义过渡函数TempCtor()

TempCtor的原型=父项的原型

子项的superClass_=父项的原型

子项原型的构造器=子项

/调用超类构造函数/方法，此函数仅在使用tracking.inherits表示类之间的继承关系。/

子项的base属性=函数

函数传了2个参数，

如果调用时传入了超过2个函数，var args= 当参数超过两个之外的参数之外的参数组成的数组。

因为传入的参数本身不能组成一个数组，不能用数组的截取方式slice，所以用call把所有参数转化成数组，再从第三个参数开始截取，剩余的参数变成数组。https://www.cnblogs.com/dingxiaoyue/p/4948166.html

将父项的原型[方法]应用到me上，传递参数args。如果me上有这个方法，回被替换，没有就会被添加。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

https://www.w3cschool.cn/wqf_web/wqf_web-x54328d9.html

返回这个方法的执行结果。

2.初始化用户媒体

① 使用MediaDevices.getUserMedia()方法获取视频轨道和音频轨道（如果需要）

getusermedia()不再工作在不安全的根源。要使用此功能，您应该考虑将应用程序切换到安全源，如HTTPS。

https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

这里如果设置了video的width和height，会怎样？

② 如果成功，将返回的视频流赋给用户绑定的element的srcObiect上。

这个对象提供了一个与HTMLMediaElement关联的媒体源，有兼容问题。

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/srcObject

③ 如果失败，会定义一个错误信息，Cannot capture user camera.（无法捕获用户摄像机）

http://www.w3school.com.cn/js/js_errors.asp

3.测试对象是否为DOM节点

如果是node节点，返回节点类型 http://www.w3school.com.cn/jsref/prop_node_nodetype.asp

如果节点是元素节点，则 nodeType 属性将返回 1。

如果节点是属性节点，则 nodeType 属性将返回 2。

否则，如果不是DOM节点，测试对象是否为“window”对象。

如果传入的是div怎么办，之后怎么追踪？

4.测试对象是否为“window”对象

例：b= !!(a)

a默认是undefined，!a是true，!!a则是false，

所以b的值是false，而不再是undefined。这样写可以方便后续判断使用。

所以，!!(a)的作用是将a强制转换为布尔型（boolean）。可用在判断a是否非空上。

当参数o存在，并且有alert属性和 document属性时返回 true，否则返回false。

5.使用'document.queryselector'从css3选择器中选择一个dom节点

如果selector是dom节点或者window对象，返回selector。

否则返回匹配到的第一个元素。

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。如果没匹配到，返回null

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector

querySelector() 方法是document独有的吗？

opt_element如果不传就是document，如果传别的会有问题？

6.追踪器

① 传入参数，找到追踪的元素，绑定定义的追踪器，参数。

例：

② element=找到的第一个dom对象

③ 判断如果element和tracker不存在，定义错误。

④ 判断元素的节点名小写选择一种追踪方式。

如果是画布，返回追踪画布

如果是图像，返回追踪图像

如果是视频，如果参数里有camera:true，请求打开摄像头

如果都不是，定义错误。

7.追踪画布

基于指定的“tracker”实例跟踪画布元素，并返回此tracker的“trackertask”。

传入2个参数element, tracker

声明一个变量 self，将其初始化为this

声明变量task = 初始化实例 tracking.TrackerTask(tracker);

8.追踪画布内部

基于指定的“tracker”实例跟踪画布元素。这个方法提取输入元素的像素信息传递给` tracker`实例。

这里的参数tracker是 tracking.ObjectTracker

getImageData方法是复制画布上指定矩形的像素数据。http://www.w3school.com.cn/tags/canvas_getimagedata.asp

打印完如图

追踪图像信息。这里就一直追踪，直到找到人脸。

9.追踪图像

10.追踪视频

① 创建画布

② 定义画布的宽高，加监听事件，当屏幕变化时，会重新定义。

offsetWidth实际获取的是盒模型(width+border + padding)

③ 声明变量 requestId

声明变量 requestAnimationFrame_ 这是一个递归函数

如果当前video加载就绪，在画布上画图。调用tracking的trackCanvasInternal_属性。

再执行一遍这个方法requestAnimationFrame_() 。

递归了，如果没有停止，会一直执行下去。

readyState属性获得视频的就绪状态 http://www.w3school.com.cn/tags/av_prop_readystate.asp

声明变量task= 初始化实例 tracking.TrackerTask(tracker);

二.各自方法

1.事件发射器实用程序

① 定义属性EventEmitter=函数

② 保留按事件类型划分范围的事件侦听器。

初始为空

③ 将侦听器添加到指定事件的侦听器数组的末尾。

如果listener不是函数，定义错误侦听器必须是函数

如果events_是空，events_=空对象

提交

5.维奥拉·琼斯实用程序

① 定义属性

② 保留定义矩形何时为来自同一组。通常，当一个面匹配时，多个矩形分类为可能的矩形以表示面，当它们相交，它们被分组为一个面。

区域重叠=0.5

③ 持有从OpenCV训练转换的HAAR级联分类器。

④ 通过haar cascade数据矩形匹配进行检测。

⑤ 快速检查试块内边缘密度是否较大，如果为真，则测试阶段。这可以显著提高性能。

⑥ 计算i，j位置上的块大小是否是有效的haar cascade阶段。检测到人脸，这块就用到了。

⑦⑧⑨

12.TrackerTask实用程序

① tracking的TrackerTask属性= 函数，传入参数 tracker

这里的base是在执行完继承后执行的。

如果没获取到参数，就定义新错误，未指定跟踪程序实例。

执行setTracker函数

② 将 tracking.EventEmitter的属性都继承

③ 原型链上得到tracker_默认为空

④ 初始状态默认不执行

⑤ 获取此任务管理的跟踪程序实例

⑥ 如果跟踪任务正在运行，则返回true，否则返回false

⑦ 设置跟踪程序任务是否正在运行。

⑧ 设置此任务管理的跟踪程序实例。

⑨ 在跟踪器任务上发出“run”事件，以便实现人员运行子操作，例如“requestAnimationFrame”。

如果正在跟踪，返回。

否则设置跟踪状态为真

设置属性reemitTrackEvent_=函数

设定追踪event

在tracker_上绑定事件track，实时追踪

提交run事件

返回this

⑩ 在跟踪器任务上发出“stop”事件，以便实现人员停止任何正在执行的子操作，例如“requestAnimationFrame”。

移除追踪事件。

14.对象跟踪器实用程序

三.使用

1.先说说优缺点

(1). 之前用过神目opencv的人脸识别，但是代码文件太大，网络不好加载慢，影响使用。

而且，虽然视频可以适应父项大小，但效果是object-fit: fill;

完全填充，造成随父项长宽不定，显示的人脸被拉伸或压缩，不是百分百保真。

(2). tracking的video不会适应父项拉伸，一直保持比例4:3 ，空的地方会被填充。

tracking最好识别效果：

video的宽高比例是320*240

参数：EdgesDensity(0.1)设置边缘密度 InitialScale(4) 设定初始比例 StepSize(1.1) 设置步长

为了适应父项大小，我开始在源码里做了处理，并给video加上 object-fit: cover，这是为了展示效果，用了替换内容。

但tracking对大的像素分辨率识别并不好，很难识别到一次。所以，这种方法舍弃了。

(3). 用了另一种思路，在识别率最高的比例，先识别出人脸，再将效果放大展示。这样解决了识别率低的问题，也可以百分百保真，不会有opencv的将人脸拉长压缩等问题。但也有缺陷，因为是先识别，再放大展现，清晰度会有点降低，如果不要求超清的，也可以接受。

(4). 实现方法：

流程图

有个320*240的video，

有个320*240的canvas，时时清空canvas的内容，

有个canvas3时时展示放大后的扫描完的video，也把带框的图给img1，

有个最后展示的img1，大小等于父项的大小，

有个传给后台识别的img2，

在识别出人脸时，canvas上画出video此时的图像，

新建个canvas2，width=识别出人脸的宽，height=识别出人脸的高

canvas2从canvas上截取出人脸 context2.drawImage

canvas2.toDataURL()

设置img2的宽高=人脸的宽高

设置img2的src 为 canvas2.toDataURL()

然后，在canvas上画出识别框，

在canvas3上画出放大的canvas，给最后展示的img1用。

设置img1的src等于canvas3上的带识别框图。

判断，如果识别出人脸，把参数归0方便下次识别。否则，canvas3画video的放大图

设置定时器，在限定时间内如果扫到人脸，就停止设别video，移除人脸跟踪监听，停止定时器。

html：

css：

js：

四.问题

这里的.on()和.emit()是哪里定义的，

是node 中的 EventEmitter 类提供了监听事件的方法 on(event, listener) 和触发事件的方法 emit(event, [arg1], [arg2], […])吗？

人脸识别 tracking.js学习相关推荐

结合人脸识别元辅助学习的AU单元检测
关注公众号,发现CV技术之美本文介绍一篇人脸技术传统方向"人脸动作单元识别"的论文:Meta Auxiliary Learning for Facial Action Unit ...
人脸识别、深度学习优秀设计（毕业专业指导）
人脸识别.深度学习优秀设计(毕业专业指导) #请在评论区留言获取联系方式按各户所提要求完成功能设计,若有其他要求请先添加联系方式!!!!
人脸识别＋深度学习，水平远超人类大脑！
全文共3342字,预计学习时长7分钟什么是人脸识别?什么是深度学习?两者结合能带来什么影响? 如果你认为一篇文章无法涵盖这么多问题,这篇文章能够改变你的想法.本文展示了所有重要的概念.总之,在这篇文 ...
python视频人脸识别教程_Python学习笔记之视频人脸检测识别实例教程
前言上一篇博文与大家分享了简单的图片人脸识别技术,其实在实际应用中,很多是通过视频流的方式进行识别,比如人脸识别通道门禁考勤系统.人脸动态跟踪识别系统等等. 下面话不多说了,来一起看看详细的介绍吧 ...
终于有人把OpenCV、人脸识别与深度学习讲明白了
导读:今天聊OpenCV,我想从人脸识别讲起. 作者:木羊同学来源:华章计算机(hzbook_jsj) 这几年人脸识别技术在国内发展飞速,给生活带了很多便利,这个大家应该都有体会.早几年进高铁站还比 ...
【第12期】终于有人把OpenCV、人脸识别与深度学习讲明白了
今天聊OpenCV,我想从人脸识别讲起. 这几年人脸识别技术在国内发展飞速,给生活带了很多便利,这个大家应该都有体会.早几年进高铁站还比较麻烦,要先排长队,得让检票口的工作人员一个一个查看证件然后&q ...
Android人脸识别的初步学习，移动端开发技术创新
根据readme中的内容修改项目. 呀,报错了-面对看不懂的错误,我们就-百度- 经过一番艰难险阻,我们的demo终于运行起来了,如下图所示: 然而,当我一次又一次注册人脸,无论是网络上找到明星的照片 ...
应用于素描人脸识别的迁移学习
论文----Composite Sketch Recognition via Deep Network - A Transfer Learning Approach 2015年论文中使用了由稀疏栈自 ...
人脸识别软件正在学习识别熊脸和牛脸
在加拿大不列颠哥伦比亚省花了十几年时间跟踪研究灰熊后, 熊类生物学家Melanie Clapham与两位硅谷科技工作者合作开发了一款名为BearID的面部识别软件.该项目旨在监测灰熊,并通过疤痕和缺口 ...

人脸识别 tracking.js学习

一.定义

1.先定义window的属性，要用的全局对象

2.继承属性

2.初始化用户媒体

3.测试对象是否为DOM节点

4.测试对象是否为“window”对象

5.使用'document.queryselector'从css3选择器中选择一个dom节点

6.追踪器

7.追踪画布

8.追踪画布内部

9.追踪图像

10.追踪视频

二.各自方法

1.事件发射器实用程序

5.维奥拉·琼斯实用程序

12.TrackerTask实用程序

14.对象跟踪器实用程序

三.使用

四.问题

人脸识别 tracking.js学习相关推荐

最新文章

热门文章