前端人脸识别框架Tracking.js

所属分类:输入,媒体-自动完成,图像

 54733  372  查看评论 (30)
分享到微信朋友圈
X
前端人脸识别框架Tracking.js ie兼容11

注:本地预览请用火狐浏览器,chrome浏览器需要在服务端查看效果

tracking.js

Tracking.js 是一个独立的JavaScript库,用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色,也可以是人,也就是说我们可以通过检测到某特定颜色,或者检测一个人体/脸的出现与移动,来触发JavaScript 事件。它是非常易于使用的API,具有数个方法和事件(足够使用了)。

还有一个我觉得不错的功能就是,截取摄像头的图像,对于一些网站用这个功能来设置用户头像也是个很炫的功能。

简单实例

引入核心类:

<script src="js/tracking-min.js"></script>

引入颜色模型类:

<script src="tracker/color.js">

实例化类启用电脑的摄像头:

var videoCamera = new tracking.VideoCamera().render();

实例化跟踪通过颜色洋红和显示X,Y和Z位置的检测区域在控制台::

videoCamera.track({
    type: 'color',
    color: 'magenta',
    onFound: function(track) {
      console.log(track.x, track.y, track.z);
    },
    onNotFound: function() {}
});

Note: 如果你想在本地运行 tracking.js 实例,你需要一个本地服务器,因为getUserMedia() 方法在 file:/// 这样的地址在一些浏览器中将不能用.

结构

  • tracking.js : 核心类文件;

  • color.js : 颜色跟踪模型

  • human.js : 人物跟踪模型.

方法

下面的一些类和方法你可以用他们来实现你的一些目标, 例如:

new tracking.VideoCamera()

请求使用用户电脑上的摄像头通过使用WebRTC's getUserMedia().

new tracking.VideoCamera().render()

将用户摄像头的图像通过一个  元素来插入到DOM模型中.

Render()方法列可以传递进去一个参数,该参数可以设置 元素插入到dom中的位置。参数值例如:#id  .class   elemet_name

如果不穿参数, 元素的插入位置会紧邻该句的javascript标签后面。

new tracking.VideoCamera().set()

设置参数:

width 图像宽度

height 图像高度

new tracking.VideoCamera().get()

获取参数:

width 图像宽度

height 图像高度

visible 可见性true和false

new tracking.VideoCamera().toDataURL()

返回瞬时图像地址  可以做为img的src属性所用

new tracking.VideoCamera().hide()

隐藏  元素。 tracking.VideoCamera(). In order to add information to the scene the element could be displayed instead of the .

 new tracking.VideoCamera().show()

显示隐藏  元素。

new tracking.VideoCamera().renderVideoCanvas()

将用户摄像头获取的图像生成到  元素,

(我测试了一下,不显示,不知道为什么).

tracking.all(“选择器”)

返回所有html元素

tracking.one(“选择器”)

返回一个html元素

参数

当初始化对象 tracking.VideoCamera().track(),您可以选择指定一些参数,例如:

 type {string} : 可以是 color or human.

跟踪类型:颜色或人物

new tracking.VideoCamera().track({
    type: 'color'
});

颜色跟踪

color {string} : 值可以是 cyan, magenta or yellow (default is magenta). 青色、洋红色,黄色

new tracking.VideoCamera().track({
    type: 'color',
    color: 'yellow'
});

人物跟踪

 data {string} : 值可以是 eye, frontal_face, mouth or upper_body (default is frontal_face). 眼睛、脸廓、嘴

new tracking.VideoCamera().track({
    type: 'human',
    data: 'eye'
});

事件

onFound : 每次检测到目标时就会触发该事件

new tracking.VideoCamera().track({
    onFound: function(track) {
        // do something
    }
});

onNotFound : 每次没有检测到目标时就会触发该事件.

new tracking.VideoCamera().track({
    onNotFound: function(track) {
        // do something
    }
});

具体使用方法可以查看官网,其中:rect.x, rect.y, rect.width, rect.height这四个参数表示左上角的坐标和框出来人脸的大小。

相关插件-自动完成,图像

前端模拟自动检测功能

jQuery前端模拟自动检测功能插件AutoCheck.js
  自动完成
 20917  338

基于jQuery的分组(带组名输入联想和组数删减)

页面是源于一场王者荣耀大屏幕分组展示,带有组名输入的联想和组数删减
  自动完成
 12552  186

输入框自动提示,字母小写转大写

输入框输入车牌号,根据首字母自动提示车牌所属省份信息,并能自动字母小写转大写,限制输入长度
  自动完成
 21909  243

jQuery仿淘宝购物车

jQuery常规的购物车计算逻辑
  自动完成
 15703  191

讨论这个项目(30)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    cusn-cmh 0
    2019/7/11 15:58:56
    tracking-min.js:8 Uncaught (in promise) Error: Cannot capture user camera.
    at tracking-min.js:8
    at 回复
    cusn-cmh 0
    2019/7/11 15:55:25
    谷歌浏览器,IP访问掉不起摄像头,必须要https怎么处理,已困住一周了
        Mt0
        2019/8/21 11:46:15
        用localhost 。别用ip
    回复
    ╊?{涿dē 0
    2018/12/20 10:46:37
    能通过摄像头实时检测人脸是否在当前摄像头中呢? 回复
    柯达 0
    2018/12/4 10:22:58
    貌似苹果下打不开摄像头
    回复
    ?桎 0
    2018/10/18 11:31:49
    怎么才能兼容ie浏览器啊
        zxjBigPower0
        2018/11/23 15:32:47
        兼容性比较差吧,建议用Chrome内核
    回复
    背醉?拥扌包 0
    2018/10/11 21:05:59
    NB,好强大的功能 回复
    高等数学 0
    2018/10/8 14:38:21
    不过期的约定 0
    2018/8/1 17:54:31
    可以录入库进行人脸比对吗?
        zxjBigPower0
        2018/11/23 15:34:42
        识别这块我不知道,暂时只做过检测功能,可以写一个页面让用户输入数据后截取出人脸的位置然后转换成图片
    回复
    Because you° 0
    2018/6/19 17:02:51
    作者NB,厉害了,我已经无法表达我的语言了 回复
    我有点儿懵~ 0
    2018/3/28 14:04:30
    怎么设置代码让识别框只识别人脸呢 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复