【前端】H5人臉實時識別自動截取人臉照片

1、前言

因公務業務須要，須要移動端H5人臉認證後開門，並且要在微信瀏覽器中，也就是嵌入到公衆號裏。

這要是放在App上作，其實不算什麼難點。關鍵在於他喵的是網頁！！！

劃重點：網頁！！

總所周知，h5調用相機拍照或者攝像，通常用一個input:

<input ref="changeInput" type="file" accept="video/*" capture="user" @change="changeVideo" />
複製代碼

這樣當你點擊input的時候，會喚醒手機自帶的相機，進行拍攝或者拍照。

2、分析

• 難點1 自定義一個這樣的遮罩在相機裏，徹底是異想天開。
• 難點2 實時進行人臉識別，由於喚醒相機進行錄像徹底是在錄像，你不能操做視頻流。
• 難點3 各種廠商的瀏覽器兼容性問題。（突出在IOS和安卓）。

3、思考

咋辦捏？

• 辦法1 跟客戶說作不了網頁的，要麼搞個App？
• 辦法2 刪庫跑路？？

其實沒有這麼極端，產品去看了別家的作法，一樣也達不到這個理想的效果，都是用input去調自帶的相機。

好吧，老老實實用這樣辦法搞定了。可是我想繼續深刻研究一下這方面，因此有了這篇文章。

4、來個在線演示吧 在線人臉檢測

實現了難度1和2，可是對於各類手機和瀏覽器的兼容狀況就不怎麼理想。

機型	小米瀏覽器	微信瀏覽器	QQ瀏覽器	UC	Chrome	獵豹	Safari
小米8	fail	pass	pass	pass	pass	pass	--
iphone7P	--	fail	--	--	--	--	fail
華爲mate20	--	pass	--	--	--	--	--
華爲mate30	--	pass	--	--	--	--	--

-- 表明沒測

只有小米8都測了是由於是我本身的手機，其餘的都是直接微信發給同事測的。

下面放上地址，你們能夠幫忙測試一下！

在線人臉檢測

5、實現原理

H5的API: getUserMedia + 人臉檢測: trackingjs

實現起來並不難，關鍵是兼容性的問題。

5.1 getUserMedia

getUserMedia官方文檔

5.2 trackingjs

trackingjs官網

5.3 將這二者結合使用便可

連接都放出來了，感興趣的童鞋能夠去深刻了解，結合本身需求作出相應的產品來。

6、後話

• 雖說有這個getUserMedia API能夠去調用攝像頭，可是兼容性始終沒有很好的解決。期待各廠商能夠支持。
• trackingjs能夠檢測人臉、眼睛、嘴巴和顏色，在線demo中僅僅使用了人臉檢測功能。
• 歡迎你們踊躍提問和發揮idea。