資訊專欄INFORMATION COLUMN
摘要：前言過年了，來點有趣的東西最近一直在嘗試通過如何視頻，怎么捕捉視頻的行為，給視頻加點好玩的東西比如給視頻加一個胡子以下記錄一下最近的玩具點擊這里看自己的效果需要允許攝像頭呀效果效果大概如下就是給視頻的臉上加個胡子我手機上有防藍光的膜，各位大
前言
過年了，來點有趣的東西
最近一直在嘗試通過web如何DIY視頻，怎么捕捉視頻的行為，給視頻加點好玩的東西,比如給視頻加一個胡子？
以下記錄一下最近的玩具
live demo點擊這里看自己的效果（需要允許攝像頭呀！！）
效果效果大概如下:
就是給視頻的臉上加個胡子（我手機上有防藍光的膜，各位大爺將就著看吧）
首先我做的視頻動態繪制胡子的東西，那肯定要先支持視頻吧
支持視頻這里代碼就非常簡單，新建一個html，寫上一個video標簽
navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia
if (navigator.getUserMedia) {
navigator.getUserMedia(
{ video: { width: 500, height: 500 } },
function (stream) {
var video = document.querySelector("video")
video.srcObject = stream
video.onloadedmetadata = function (e) {
video.play()
}
},
function (err) {
console.log("The following error occurred: " + err.name)
}
)
} else {
console.log("getUserMedia not supported")
}
寫到這里視頻就可以播放了
然后我們把這個視頻放進canvas里,
其實就是定時采集video的內容，然后drawImage到canvas就好了
setInterval(() => {
v.drawImage(video, 0, 0, 500, 375)
vData = v.getImageData(0, 0, 500, 375)
}, 20)
這里開始canvas里面的內容也就開始動起來了
下面就是必要重要的內容了
面部識別我要做的是面部識別，所有怎么識別呢
讓我自己現場實現一個（不存在的，雖然在學機器學習，但是才學了幾天，還遠遠遠遠不夠）
找開源（bingo，就是你了）
開源面部識別 trackingjs然后就是找到了一個這個 trackingjs
看了一下效果，非常好，雖然有點慢，但是滿足我們的功能
face(image)-demo
face(camera)-demo
好，那么先在本地跑個demo試試
......然后5min過去了
且慢，好像這個識別不能識別camera的內容（camera只支持到face，不支持mouth、eye、nose級別）
mdzz
ps: 如果只是簡單加個帽子之類的東西的話，用這個庫也就夠了
下面幾天我基本上就卡在這個環節幾天都沒有什么好的思路
直到某天，我隨便刷的時候看到了這個實現face-detection-node-opencv
咦，她也實現了面部識別，好像這個人再trackingjs的contributor里面見過，然后她用到了opencv，記得在今年d2的大會上主會場某幾個嘉賓也分享了ar主題的東西，也是用服務器來實現的(就是canvas的getImageData后把數據傳給后端，后端處理完再把結果返回)，當時我以為效率會很差（在圖片傳輸方面），其實看下來好像效果還可以
好，接下里就配上后端來寫，似乎功能會多很多。那么接下來就像武器大師說的：開打開打
node 識別 opencv那么就看opencv的node有什么好的實現了
then，node-opencv，這個可以識別到face級別，好像不太夠
再找
faced
yooyoo，眼睛鼻子都識別出來了，很屌嘛，就你了
那就直接搭node服務跑起來唄
然后簡單花了10分鐘搭了個koa2的服務
整體思路就是：
前端開啟video
video => canvas => base64 => ArrayBuffer（這個庫只能識別圖片對象或者ArrayBuffer）
websocket前后端通訊
后端處理圖片，返回face、mouth在圖片上的位置數據
前端渲染嘴巴位置
加上胡子
done
下面是 后端處理圖片的時間，平均大概5ms，當做玩具的話，勉強夠 start: 4.568ms start: 3.881ms start: 3.564ms start: 3.690ms start: 5.971ms start: 4.069ms start: 3.364ms start: 5.054ms start: 22.219ms start: 5.586ms start: 5.000ms
本地測試一切正常，但是部署到服務器上的時候，還是有一些問題
服務器安裝opencv的時候有深坑
video，只能在https下用
https 下的websocket 得升級到 wss
靜態資源訪問又遇到問題，媽的
這里既然是前端文章，那么我就不張開來講部署的問題了，
差不多就是這樣思路
最后可能是今年最后一篇，寫的可能比較隨意，不知道上下文連不連貫（看官們，抱歉）
然后最后的結果就如文章最開始所見：
點擊這里看自己的效果（需要允許攝像頭呀！！）
詳細代碼的話：
前后端都在這里了： face-decorator
參考鏈接/推薦閱讀咦？瀏覽器都能做人臉檢測了？
前端工程師做Face Detection
faced
node-opencv
HTML5-Face-Detection
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107412.html
摘要：劍橋大學印度國家技術學院近日聯合發布了一篇論文，名為利用空間融合卷積神經網絡通過面部關鍵點進行偽裝人臉識別，該論文利用空間融合卷積神經網絡為刑偵過程的人臉識別提供了有力的支持，我們來一窺究竟。 劍橋大學、印度國家技術學院近日聯合發布了一篇論文，名為《利用空間融合卷積神經網絡通過面部關鍵點進行偽裝人臉識別Disguised Face Identification (DFI) with Faci...
摘要：這群小伙伴們堅信的強大能力，堅信可以模擬人類很多的感官功能，包括視覺聽覺，甚至包括思考能力給安裝上一個機械手臂，甚至可以模擬人類的肢體功能，這就是阿里云人工智能的能力。 阿里云人工智能 ET， 代表的是阿里云語音識別、語音合成、自然語言理解、實時圖像識別、機器學習的綜合技術，背后是阿里云飛天系統強大的計算能力。 可是這么高大上的 ET，最近居然開始不務正業了，來看看它都干了啥！！！ 視...
摘要：人臉識別技術所獨具的活性判別能力保證了他人無法以非活性的照片木偶蠟像來欺騙識別系統。人臉識別技術所采用的依據是人臉照片或實時攝取的人臉圖像，因而無疑是最容易獲得的。 人臉識別是近年來模式識別、圖像處理、機器視覺、神經網絡以及認知科學等領域研究的熱點課題之一，被廣泛應用于公共安全（罪犯識別等）...
摘要：打包配置要特別注意一點，一定要加上，這樣打包時會將外部引入的包比如在根目錄下或文件下新加外部包打包到項目中，服務器上項目才能運行。 大家好，我是小富~在我最開始寫文章的時候曾經寫過一篇文章 基于 Java 實現的人臉識別功能，因為剛開始碼字不知道寫點什么，就簡單弄了個人臉識別的Demo。但讓我沒想到的是，在過去...
閱讀 1694·2023-04-25 20:16
閱讀 3878·2021-10-09 09:54
閱讀 2710·2021-09-04 16:40
閱讀 2527·2019-08-30 15:55
閱讀 843·2019-08-29 12:37
閱讀 2746·2019-08-26 13:55
閱讀 2917·2019-08-26 11:42
閱讀 3159·2019-08-23 18:26
