日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 人工智能 > pytorch >内容正文

pytorch

吗咿呀嘿-用js来搞个简单的人脸识别

發布時間：2023/12/14 pytorch 40 豆豆
生活随笔 收集整理的這篇文章主要介紹了 吗咿呀嘿-用js来搞个简单的人脸识别 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.


緣起
“螞蟻呀嘿，螞蟻呀呼，螞蟻呀哈” 相信最近好多人的朋友圈或者抖音都被類似視頻刷過屏！
類似的效果最早是在2020年初，那個時候大家應該還都記得，幾乎所有的人都因為疫情原因被迫線上辦公！
工作當然離不開開會了，這點歪果仁和中國很像，國內我們一般用qq或者釘釘來個在線視頻會議！歪果仁也會經常開線上會議，不過他們用的最多的是zoom這個軟件。經常的在線會會讓人很煩躁，為什么呢？原本在家辦公就不用洗頭了，但是為了開在線視頻會議還得去專門洗個頭！
so，一個來自俄羅斯程序猿就想了一個招數惡搞一下他的同事。他基于 first-order-model 做了一個叫做Avatarify 的軟件，并且放在了全世界做大的同性交友網站github上。First Order Motion Model for Image Animation 簡單來說就是把一張圖片變成動態的。Avatarify ，看起來很熟悉的名字，你肯定聽過一部叫阿凡達的電影！之后程序猿小哥又基于Avatarify 做了一個蘋果app，在網上掀起了嗎咿呀嘿旋風，不過在上架appstore7天后在中國區就被下架了，原因不得而知。
來看一下 First Order Motion Model上的圖片動畫結果

First Order Motion Model上的swap face結果
看完以后大概能明白為什么被下架了！如果東西能被普通人隨便使用，那么我們的表情甚至動作都能被別人模擬出來，只要他有一張你的照片！所以說人臉識別不是絕對安全，什么都可以被模擬！這兩天的315晚會不知道大家看沒有看，好多商家都在非法收集的臉部信息！
上面我們提到的庫都是python的，app實現這樣的功能都是把圖片或者視頻傳輸給服務器，然后服務器處理文件。
瀏覽器環境人臉識別
我們今天要在瀏覽器環境下面實現一個簡單的人臉識別，我們會用到Tracking.js ，這是一個獨立的JavaScript庫，用于跟蹤從相機或者圖片實時收到的數據。跟蹤的數據既可以是顏色，也可以是人，也就是說我們可以通過檢測到某特定顏色，或者檢測一個人體/臉的出現與移動，來觸發JavaScript 事件。
trankingjs下載
我們需要先點擊后面的標簽下載trankingjs
trankingjs使用-識別圖片
引入 tracking-min.js人臉識別庫
引入face-min.js，eye-min.js，mouth-min.js 臉部，眼睛，嘴巴等模型文件
創建html文件，內容如下

<!DOCTYPE html> <html lang="en"> ? <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./build/tracking-min.js"></script><script src="./build/data/face-min.js"></script><script src="./build/data/mouth-min.js"></script><script src="./build/data/eye-min.js"></script><style>.rect {border: 2px solid #a64ceb;left: -1000px;position: absolute;top: -1000px;} ?.demo-container {width: 100%;height: 530px;position: relative;background: #eee;overflow: hidden;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;} ?</style> </head> ? <body><div class="demo-container"><img src="./imgs/2.png" alt="" id="img"></div> ?<script>window.onload = function () { ?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> ?

html和css比較簡單，這里我們主要來看js代碼。
注意js代碼必須一定要寫在window.onload 回調函數里面，否者獲取不到圖片的數據，就沒有辦法對圖片進行識別！
創建識別對象

// 創建追蹤識別對象var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);// 設置 追蹤識別的圖片tracking.track('#img', tracker);// 監聽追蹤事件tracker.on('track', function (event) {// 獲取追蹤數據event.data.forEach(function (rect) {window.plot(rect.x, rect.y, rect.width, rect.height);});});

獲取的event.data是一個數組 ，數組存放識別處理出來的臉部數據，數據結構如下
{width: 61, height: 61, x: 244, y: 125}
x和y是識別出來元素的坐標，width和height是識別出來元素的寬度
處理識別結果
接下來我們只要需要把得到的結果標記到圖片的對應的位置即可，通過plot函數創建一個div，給定對應的坐標和寬高

window.plot = function (x, y, w, h) {var img = document.querySelector('#img')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';};

然后就會看到這樣的結果，會識別出照片的眼睛、鼻子、嘴巴
trankingjs使用-識別攝像頭數據
創建html文件，寫入如下代碼

<!doctype html> <html> ? <head><meta charset="utf-8"><title>demo</title> ?<script src="./build/tracking-min.js"></script><script src="./build/data/face-min.js"></script><style>video,canvas {position: absolute;} ?</style> </head> ? <body> ?<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> ?<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);});}); ? ?}; ?</script> ? </body> ? </html>

核心js代碼解釋如下
創建識別對象
創建識別對象并且啟用攝像頭，將攝像頭內容輸出到video標簽上

// 視頻顯示var video = document.getElementById('video');//創建識別對象var tracker = new tracking.ObjectTracker('face');// 設置識別的放大比例tracker.setInitialScale(4);// 設置步長tracker.setStepSize(2);// 邊緣密度tracker.setEdgesDensity(0.1);// 啟動攝像頭，并且識別視頻內容tracking.track('#video', tracker, {camera: true}); ?

注意：這里的識別放大比例，步長，邊緣密度等值可以根據攝像頭距離物體遠近自己調整。
處理識別結果

// 創建canvas 用于繪圖繪圖var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');//監聽識別事件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);});});

然后啟動起來，瀏覽器會提示是否允許開啟攝像頭！點擊允許，就會看到你英俊瀟灑（沉魚落雁）的臉龐！

總結

以上是生活随笔為你收集整理的吗咿呀嘿-用js来搞个简单的人脸识别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。