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/demo.css" rel="external nofollow" rel="external nofollow" >

 <script src="build/tracking-min.js"></script>
 <script src="build/data/face-min.js"></script>
 <script src="build/data/eye-min.js"></script>
 <script src="build/data/mouth-min.js"></script>

 <style>
 .rect {
  border: 2px solid #a64ceb;
  left: -1000px;
  position: absolute;
  top: -1000px;
 }

 #img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -173px 0 0 -300px;
 }
 </style>
</head>
<body>
 <!-- <div class="demo-title">
  <p><a href="http://trackingjs.com" rel="external nofollow" target="_parent">tracking.js</a> － detect faces, eyes and mouths in a image</p>
 </div>
 -->
 <!-- <div class="demo-frame"> -->
  <div class="demo-container">
   <img id="img" src="
   http://img3.imgtn.bdimg.com/it/u=2939771753,2928311039&fm=214&gp=0.jpg
   " />
  </div>
<!--  </div> -->

 <script>
  window.onload = function() {
   var img = document.getElementById('img');

   var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);
   tracker.setStepSize(1.7);

   tracking.track('#img', tracker);

   tracker.on('track', function(event) {
    event.data.forEach(function(rect) {
     window.plot(rect.x, rect.y, rect.width, rect.height);
    });
   });

   window.plot = function(x, y, w, h) {
    var rect = document.createElement('div');
    document.querySelector('.demo-container').appendChild(rect);
    rect.classList.add('rect');
    rect.style.width = w + 'px';
    rect.style.height = h + 'px';
    rect.style.left = (img.offsetLeft + x) + 'px';
    rect.style.top = (img.offsetTop + y) + 'px';
   };
  };
 </script>

</body>
</html>

这里要注意，人脸必须是解决跨域了的，读取本地图片可能会包跨域问题

读取摄像头

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>tracking.js - face with camera</title>
 <link rel="stylesheet" href="assets/demo.css" rel="external nofollow" rel="external nofollow" >

 <script src="build/tracking-min.js"></script>
 <script src="build/data/face-min.js"></script>
  <script src="node_modules/dat.gui/build/dat.gui.min.js"></script>
 <script src="assets/stats.min.js"></script>

 <style>
 video, canvas {
  margin-left: 230px;
  margin-top: 120px;
  position: absolute;
 }
 </style>
</head>
<body>
 <div class="demo-frame">
  <div class="demo-container">
   <video id="video" width="320" height="240" preload autoplay loop muted></video>
   <canvas id="canvas" width="320" height="240"></canvas>
  </div>
 </div>

 <script>
  window.onload = function() {
   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);
    });
   });

   var gui = new dat.GUI();
   gui.add(tracker, 'edgesDensity', 0.1, 0.5).step(0.01);
   gui.add(tracker, 'initialScale', 1.0, 10.0).step(0.1);
   gui.add(tracker, 'stepSize', 1, 5).step(0.1);
  };
 </script>

</body>
</html>

总结

到此这篇关于tracking.js实现前端人脸识别功能的文章就介绍到这了,更多相关tracking.js人脸识别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 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

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

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

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

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

  • 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

  • 如何基于SpringBoot实现人脸识别功能

    如何基于SpringBoot实现人脸识别功能

    目录 前言 需求分析 一.人脸注册 二.人脸登录 具体实现 一.人脸注册 二.刷脸登录 总结 前言 去年在公司参与了一个某某机场建设智能机场的一个项目,人脸登机是其中的一个功能模块,当时只是写了后台的接口,调用人脸识别设备的api,给闸机回传数据信号,以保障该功能的正常使用. 当时因为项目进度紧张,手里还有其他项目赶进度,也就没时间去分享这个功能的实现.前几天刷脸进公司大楼的时候,突然想起来应该写一个功能类似的demo分享个人的一些小小的经验.在当时项目中刷脸的设备终端是采购某某AI公司,当然咱

  • 微信小程序人脸识别功能代码实例

    微信小程序人脸识别功能代码实例

    前几天偶然看见一个人脸识别的小程序demo,觉得很有趣下载下来想玩玩,结果只是一个框架而已用不了的,花了点时间完善一下 吐槽一下wx.uploadFile这个接口,真是个大坑,最开始调用时候,我以为它和同期的wx.downloadFile一样,只需要填入必须的参数就可以用,结果还是要配合后台php的 首先,upload这个接口的url和request一样指的是php的路径,而不是download一样文件路径 其次,我在最开始一直没弄懂这个"name"到底应该填什么,上传功能不好用我一直

  • 小程序实现人脸识别功能(百度ai)

    小程序实现人脸识别功能(百度ai)

    本文介绍了小程序实现人脸识别功能,分享给大家,具体如下: 文档中心:https://ai.baidu.com/docs#/Begin/a2bbf4b2 接入流程 1. 按照文档获取AppID.API Key.Secret Key,进行Access Token(用户身份验证和授权的凭证)的生成 const getBaiduToken = function () { return new Promise((resolve, reject) => { //自行获取APIKey.SecretKey co

  • Python基于OpenCV库Adaboost实现人脸识别功能详解

    Python基于OpenCV库Adaboost实现人脸识别功能详解

    本文实例讲述了Python基于OpenCV库Adaboost实现人脸识别功能.分享给大家供大家参考,具体如下: 以前用Matlab写神经网络的面部眼镜识别算法,研究算法逻辑,采集大量训练数据,迭代,计算各感知器的系数...相当之麻烦~而现在运用调用pythonOpenCV库Adaboost算法,无需知道算法逻辑,无需进行模型训练,人脸识别变得相当之简单了. 需要用到的库是opencv(open source computer vision),下载安装方式如下: 使用pip install num

  • python利用Opencv实现人脸识别功能

    本文实例为大家分享了python利用Opencv实现人脸识别功能的具体代码,供大家参考,具体内容如下 首先:需要在在自己本地安装opencv具体步骤可以问度娘 如果从事于开发中的话建议用第三方的人脸识别(推荐阿里) 1.视频流中进行人脸识别 # -*- coding: utf-8 -*- import cv2 import sys from PIL import Image def CatchUsbVideo(window_name, camera_idx): cv2.namedWindow(w

  • 用Python实现简单的人脸识别功能步骤详解

    用Python实现简单的人脸识别功能步骤详解

    前言 让我的电脑认识我,我的电脑只有认识我,才配称之为我的电脑! 今天,我们用Python实现简单的人脸识别技术! Python里,简单的人脸识别有很多种方法可以实现,依赖于python胶水语言的特性,我们通过调用包可以快速准确的达成这一目的.这里介绍的是准确性比较高的一种. 一.首先 梳理一下实现人脸识别需要进行的步骤: 流程大致如此,在此之前,要先让人脸被准确的找出来,也就是能准确区分人脸的分类器,在这里我们可以用已经训练好的分类器,网上种类较全,分类准确度也比较高,我们也可以节约在这方面花

  • springboot集成opencv实现人脸识别功能的详细步骤

    springboot集成opencv实现人脸识别功能的详细步骤

    前言 项目中检测人脸图片是否合法的功能,之前用的是百度的人脸识别接口,由于成本高昂不得不寻求替代方案. 什么是opencv? OpenCV是一个基于BSD许可(开源)发行的跨平台计算机视觉和机器学习软件库,可以运行在Linux.Windows.Android和Mac OS操作系统上.轻量级而且高效--由一系列 C 函数和少量 C++ 类构成,同时提供了Python.Java.MATLAB等语言的接口,实现了图像处理和计算机视觉方面的很多通用算法. 项目集成步骤 由于项目是放在Linux系统中跑的

  • 手把手教你利用opencv实现人脸识别功能（附源码+文档）

    手把手教你利用opencv实现人脸识别功能（附源码+文档）

    目录 一.环境 二.使用Haar级联进行人脸检测 三.Haar级联结合摄像头 四.使用SSD的人脸检测 五. SSD结合摄像头人脸检测 六.结语 一.环境 pip install opencv-python python3.9 pycharm2020 人狠话不多,直接上代码,注释在代码里面,不说废话. 二.使用Haar级联进行人脸检测 测试案例: 代码:(记得自己到下载地址下载对应的xml) # coding=gbk """ 作者:川川 @时间 : 2021/9/5 16:3

随机推荐