tracking.js實(shí)現(xiàn)前端人臉識(shí)別功能
1.下載
https://trackingjs.com/
2.運(yùn)行例子
納總一下
發(fā)現(xiàn)效果
里面的代碼為
<!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 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>
這里要注意,人臉必須是解決跨域了的,讀取本地圖片可能會(huì)包跨域問題
讀取攝像頭
<!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>
總結(jié)
到此這篇關(guān)于tracking.js實(shí)現(xiàn)前端人臉識(shí)別功能的文章就介紹到這了,更多相關(guān)tracking.js人臉識(shí)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Layui 導(dǎo)航默認(rèn)展開和菜單欄選中高亮設(shè)置的方法
今天小編就為大家分享一篇Layui 導(dǎo)航默認(rèn)展開和菜單欄選中高亮設(shè)置的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09js 數(shù)組實(shí)現(xiàn)一個(gè)類似ruby的迭代器
今天突然發(fā)現(xiàn)js的數(shù)組處理起來真是麻煩,代碼一些就是一大堆,相比起ruby的迭代器來真是遜色不少。2009-10-10權(quán)威JavaScript 中的內(nèi)存泄露模式
權(quán)威JavaScript 中的內(nèi)存泄露模式...2007-08-08JavaScript實(shí)現(xiàn)進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)進(jìn)度條效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10js中substring和substr兩者區(qū)別和使用方法
這篇文章主要介紹了js中substring和substr兩者區(qū)別和使用方法,每一個(gè)步驟都有相應(yīng)的文字介紹,感興趣的小伙伴們可以參考一下2015-11-11layui table去掉右側(cè)滑動(dòng)條的實(shí)現(xiàn)方法
今天小編就為大家分享一篇layui table去掉右側(cè)滑動(dòng)條的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09