tracking.js页面人脸识别插件使用方法


Posted in Javascript onApril 16, 2020

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

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

var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var tracker = new tracking.ObjectTracker('face');
 tracker.setInitialScale(4);
 tracker.setStepSize(2);
 tracker.setEdgesDensity(0.1);

 tracking.track('#video', tracker, { camera: true });

 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);
 context.font = '11px Helvetica';
 context.fillStyle = "#fff";
 context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
 context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
 });
 });`

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

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

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

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

具体的截取方法:

var canvas = $('canvas'),
 context = canvas.getContext('2d'),
 video = $('video');
context.drawImage(video, 0, 0, 200, 150);
var snapData = canvas.toDataURL('image/png'),
var imgSrc = "data:image/png;" + snapData;

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Discuz代码中的msn聊天小功能
May 25 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 #Javascript
Vue.js的动态组件模板的实现
Nov 26 #Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 #Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 #Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 #Javascript
Vuex的初探与实战小结
Nov 26 #Javascript
微信小程序页面间值传递的两种方法
Nov 26 #Javascript
You might like
关于Intype一些小问题的解决办法
2008/03/28 PHP
php include加载文件两种方式效率比较
2010/08/08 PHP
php缓存技术详细总结
2013/08/07 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
yii2实现 "上一篇,下一篇" 功能的代码实例
2017/02/04 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证
2014/09/01 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
javascript求日期差的方法
2016/03/02 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
小程序实现投票进度条
2019/11/20 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
python解析基于xml格式的日志文件
2017/02/25 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
python实现杨辉三角思路
2017/07/14 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
浅析Python 条件控制语句
2020/07/15 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
中医药大学市场营销专业自荐信
2013/09/29 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
满月酒主持词
2014/03/27 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
检讨书大全
2015/01/27 职场文书