前端人脸识别框架Tracking.js

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

 4323  66  查看评论 (6)
前端人脸识别框架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突出文本插件highlightRegex

highlightRegex是一个jQuery插件,可以突出文档文本的正则表达式。
  自动完成
 9557  5

jQuery添加/删除标签插件jQuery Tags Input Plugin

一个jquery开发的标签功能加强插件,可以生成或删除标签,还能对输入重复标签进行检查,和JQuery autocomplete插件配合实现自动完成功能。
  自动完成
 56052  98

jq汉字转拼音

汉字转拼音
  自动完成
 7604  79

剩余字数

1.实时计算剩余字数; 2.超过最大字数输入无效; 3.兼容手机输入; 4.jQuery版;
  自动完成
 7599  72

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币

    锄禾?? 0
    2017/10/16 21:25:39

    可以解决一下这个报错吗;两个报错信息,我什么都没有改 ,是不是jar包位置不对

    face-min.js:8 Uncaught ReferenceError: tracking is not defined
        at face-min.js:8
    (anonymous) @ face-min.js:8
    tracking-min.js:8 Uncaught Error: Object classifier not valid, try `new tracking.ObjectTracker("face")`.
        at tracking-min.js:8
        at Array.forEach (<anonymous>)
        at new tracking.ObjectTracker (tracking-min.js:8)
        at window.onload (Testface.html:73)
    回复
    吃肉De包子 0
    2017/10/11 13:50:54
    换了个真人视频就不行了
        zxjBigPower0
        2017/10/11 15:50:22

        可以的,切换网络摄像头都可以的

    回复
    浦浦 0
    2017/10/11 10:27:14

    有具体实例不?

        zxjBigPower0
        2017/10/11 15:50:55

        3.html是我写的调取摄像头并实时监测人脸的实例

        浦浦0
        2017/11/14 17:13:46

        下载了,看到了。谢谢~~

    回复
取消回复