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

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 可以直接用于页面图片的显示。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • trackingjs+websocket+百度人脸识别API实现人脸签到

    trackingjs+websocket+百度人脸识别API实现人脸签到

    在公司做了个年会的签到.抽奖系统.用java web做的,用公司的办公app扫二维码码即可签到,扫完码就在大屏幕上显示这个人的照片.之后领导让我改得高大上一点,用人脸识别来签到,就把扫二维码的步骤改成人脸识别. 了解了相关技术后,大致思路如下:先用websocket与后台建立通讯:用trackingjs在页面调用电脑摄像头,监听人脸,发现有人脸进入屏幕了,就把图片转成base64字符串,通过websocket发送到后端:后端拿到图片,调用百度的人脸识别API,去人脸库中匹配(当然事先要在百度云建

  • 图片文字识别（OCR）插件Ocrad.js教程

    Ocrad.js 相当于是 Ocrad 项目的纯 JavaScript 版本,使用 Emscripten 自动转换.这是一个简单的 OCR (光学字符识别)程序,可以扫描图像中的文字回文本. 不像 GOCR.js,Ocrad.js 被设计成一个端口,而不是围绕可执行的包装.这意味着后续的图像处理,并不涉及重新初始化可执行代码,以便处理图像尽可能少的进行,因此它需要的时间仅为 GOCR.js 的八分之一. GOCR.js 已在 github 进行开源,下载地址 ocrad.js 的csdn资源下载

  • js简单实现根据身份证号码识别性别年龄生日

    根据身份证号码识别性别年龄生日的JS代码: 复制代码 代码如下: function discriCard(){ //获取输入身份证号码 var UUserCard = ""; //获取出生日期 UUserCard.substring(6, 10) + "-" + UUserCard.substring(10, 12) + "-" + UUserCard.substring(12, 14); //获取性别 if (parseInt(UUserCar

  • JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序

    算法根源: 大致是这样车辆识别代码的第9位是检验位,检验位可用0-9中任一数字或字母"X"表示.其它位置的数字和字母代表的意义个厂家含义可能不同,但在VIN码的其他16位字码确定后,按以下方法计算得出第九位的检验位. 首先将其它16位中的字母按下列关系转换成数字: A=1 B=2 C=3 D=4 E=5 F=6 G=7 H=8 J=1 K=2 L=3 M=4 N=5 P=7 R=9 S=2 T=3 U=4 V=5 W=6 X=7 Y=8 Z=9 每个位置都有个加权数: 位置:1 2 3

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

    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'); v

  • PHP使用Face++接口开发微信公众平台人脸识别系统的方法

    PHP使用Face++接口开发微信公众平台人脸识别系统的方法

    本文实例讲述了PHP使用Face++接口开发微信公众平台人脸识别系统的方法.分享给大家供大家参考.具体如下: 效果图如下: 具体步骤如下: 首先,先登录Face++的官网注册账号:官网链接 注册之后会获取到api_secret和api_key,这些在调用接口的时候需要用到. 然后接下来的就是使用PHP脚本调用API了. 在使用PHP开发微信公共平台的时候,推荐使用Github上的一款不错的框架:wechat-php-sdk 对于微信的常用接口做了一些封装,核心文件wechat.class.php

  • 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

  • JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js

    我一直对人工智能识别技术非常感兴趣,因为我无法想象这究竟是一种什么样的算法,什么样的分析过程.无论是声音识别.人脸识别或其它种识别,人们的外貌.说话的方式都是如此不同,一种图片你可以用不同的方式.从不同的角度拍摄,我不能理解这些识别技术是如何做到的.有个叫做"面具"的游戏也使用了这种识别技术,我想对于脸部识别技术也应该研究一下.Facebook使用了这种技术,在手势控制中也能用到它,所以,你网站上也会有应用的地方. 我找到的一个可以用于人脸识别的JavaScript程序包是Face D

  • tracking.js实现前端人脸识别功能

    1.下载 https://trackingjs.com/ 2.运行例子 纳总一下 发现效果 里面的代码为 <!doctype html> <html> <head> <meta charset="utf-8"> <title>tracking.js - face hello world</title> <link rel="stylesheet" href="assets/dem

  • vue2+tracking实现PC端的人脸识别示例

    vue2+tracking实现PC端的人脸识别示例

    目录 需求 分析 实现思路 使用 tracking.js 最后 总是会有一些奇奇怪怪的需求无法避免.记录一下曾经项目遇到的一个需求. 需求 上传患者真实头像,可以有两种选择,一种是通过常规的文件选择方式上传,第二种方式就是医生可以调用电脑的摄像头拍一张然后上传. 分析 常规的就不用分析了,只分析第二种: 调用本地摄像头 然后可以进行拍照 因为是患者的真实头像,方便辨认,要求要拍到患者脸部 检测到患者脸部,自动截图,医生只需要点击上传即可 实现思路 首先看有不有能识别到患者脸部的前端第三方库,如果

  • Angular5中调用第三方js插件的方法

    话不多说直入主题,最常见的有三种方式来引用第三方插件,下面以jquery插件及基于JQuery的两款插件:nicescroll和rangeSlider为例. 一.第一种方式:在.angular-cli.json文件中配置 步骤: 1.在项目根目录.angular-cli.json文件中找到script字段,在数组中添加要引用的所有js文件(注意先后顺序) "scripts": ["assets/jquery-3.2.1.js","assets/jquery

  • jQuery NProgress.js加载进度插件的简单使用方法

    NProgress.js 说明: NProgress是基于jquery的,且版本要 >1.8 下载地址: https://github.com/rstacruz/nprogress API: NProgress.start() - 启动进度条 NProgress.set(0.4) - 将进度设置到具体的百分比位置 NProgress.inc() - 少量增加进度 NProgress.done() - 将进度条标为完成状态 使用步骤: 1. 引入 <link rel="styleshe

  • Vue+tracking.js 实现前端人脸检测功能

    项目中需要实现人脸登陆功能,实现思路为在前端检测人脸,把人脸照片发送到后端识别,返回用户token登陆成功 前端调用摄像头使用tracking.js检测视频流中的人脸,检测到人脸后拍照上传后端. 后端使用face_recognition人脸识别库,使用Flask提供restfulAP供前端调用 实现效果如下图: 登陆界面: 摄像头检测人脸界面: 前端代码如下: <template> <div id="facelogin"> <h1 class="

  • js防止页面被iframe调用的方法

    本文实例讲述了js防止页面被iframe调用的方法.分享给大家供大家参考.具体实现方法如下: 一.问题描述: 有时候我们发会现自己的网站页面被别人调用并且一模一样,这个其实就是简单的iframe调用了,下面我来给大家介绍js防止页面iframe调用的方法总结吧,有需要的朋友可参考 二.解决方法: 防止自己的网页被人框架: top.location.href 最上层的地址 windows.location.href自己的地址 self指代当前窗口对象,属于window最上层的对象; locatio

随机推荐