摘要：身為一名前業(yè)務(wù)程序員和現(xiàn)前端程序員，這樣的功能還是陌生的領(lǐng)域。需求使用加攝像頭，通過人臉檢測，完成自動拍照功能。在的屏幕上，顯示攝像頭的實時畫面，要是畫面中檢測出人臉，則觸發(fā)拍照。這樣做的效果能夠獲得更高的，同時還能完成更遠(yuǎn)距離臉部的捕獲。

因為項目原因，需要使用人臉檢測（face detection）功能。身為一名前JAVA業(yè)務(wù)程序員和現(xiàn)前端程序員，這樣的功能還是陌生的領(lǐng)域。那能不能通過搜索和學(xué)習(xí)能力，加上已有的編程思想，快速實現(xiàn)功能呢？這就是這篇文章的重點，憑借自己的技術(shù)與積累，走向自己不熟悉的領(lǐng)域。

使用PC加攝像頭，通過人臉檢測，完成自動拍照功能。在PC的屏幕上，顯示攝像頭的實時畫面，要是畫面中檢測出人臉，則觸發(fā)拍照。

抽其關(guān)鍵點：攝像頭，實時畫面，人臉檢測，和拍照

項目并沒有要求開發(fā)應(yīng)用的類型，那么我肯定是先從自身擁有的技能出發(fā)，看是否能尋求解決方案。身為前端，深知前端技術(shù)潛力無限，肯定有自己還不知道的技術(shù)。果不其然，找到了Tracking.js

Tracking.js是一個很有意思的庫，體積小巧，在瀏覽器上，直接通過JS提供一些基本的Computer Vison相關(guān)的功能，如人臉檢測（face detection），顏色識別(color detection)，特征識別(feature detection)。關(guān)鍵是，出了對靜態(tài)圖片能夠進(jìn)行識別和處理之外，還能夠直接對視頻（video）和攝像頭（webcam）視屏流進(jìn)行處理，這就基本給出了人臉識別的方案。

那如何拍照呢？我找到了WebcamJS。能夠在瀏覽器上讀取攝像頭視頻流，調(diào)用函數(shù)截取某個時刻視頻流幀為圖片，即視為拍照。

兩個庫一結(jié)合，就有了初步的解決方案，實現(xiàn)了功能，簡單快速。

在Tracking.js的官網(wǎng)上可以看到，demo的視頻尺寸都是很小的，320 * 240，才能有30FPS的處理速度。尺寸如果大了，則識別速度慢，卡頓明顯。項目中視頻顯示大小基本為1080P分辨率屏幕的三分之一，直接處理這個大小的視頻，速度肯定不夠。就算我不直接對大尺寸視頻流進(jìn)行處理，轉(zhuǎn)而對一個隱藏的小尺寸視頻流處理，將人臉位置映射到大視頻流中，速度上沒問題，但是可檢測的人臉大小就有限了，即人必須離攝像頭比較近才能被檢測到。

使用的是羅技的1080P的網(wǎng)絡(luò)攝像頭，但是在瀏覽器上能夠看到的，好像并沒有以1080P的分辨率進(jìn)行展示。嘗試了一些參數(shù)的修改，但是結(jié)果都不盡人意。

實時的視頻流人臉識別，是很耗CPU的，下圖中右邊那個藍(lán)色的陡坡就是在我關(guān)閉了Tracking.js的demo頁面后CPU下降的曲線。

這種情況下，想添加一些傳統(tǒng)的網(wǎng)頁動效，簡直卡出翔來。（關(guān)于這點，使用web worker進(jìn)行人臉檢測的工作，應(yīng)該能有所幫助，但是自己并沒有往這方面走）

為了尋找上面的問題的解決辦法，我了解到了Tracking.js和WebcamJS的運行原理。比如在瀏覽器上獲取攝像頭視頻流，是通過getUserMedia，是基于WebRTC的支持。

WebcamJS就是通過getuserMedia()方法，獲得攝像頭的視頻流信息，作為標(biāo)簽的src屬性，從來能夠在網(wǎng)頁上進(jìn)行顯示實時畫面。通過Canvas的drawImage()方法，將video標(biāo)簽傳入，即可繪制那個時刻視頻幀的圖像。（也是通過這次機(jī)會我才了解到drawImage()原來還可以接受HTMLVideoElement作為參數(shù)的）

之前就知道，一般做計算機(jī)視覺的，都會用opencv庫，這是個C++的庫。同時又查到了，有人在node上做了opencv的擴(kuò)展，并且看到了這個Github項目。于是為了檢測效果，自己做了嘗試。

通過上面的學(xué)習(xí)，我已經(jīng)能夠在瀏覽器段獲取攝像頭的幀圖像，并且知道opencv能做人臉檢測。那么這次的方案思路就是：將視頻流的幀圖像，通過websocket發(fā)到后臺服務(wù)器上，在服務(wù)器里使用opencv進(jìn)行人臉分析，將人臉的坐標(biāo)發(fā)送到前端。

這里后臺我并沒有使用node-opencv，而是使用QT直接做websocket服務(wù)器和調(diào)用opencv庫（仗著自己曾也學(xué)過C++，就大膽的直接奔著C++去了）。

但是結(jié)果也不理想，原因如下。

將圖片發(fā)送給后臺，首先想到的是使用Canvas的toDataURL()方法，將圖片轉(zhuǎn)成base64字符串，發(fā)給后臺。但實測該方法很慢！640 * 480大小的圖片，通過toDataURL()，大致需要50ms時間。

然后考慮使用getImageData(0, 0, 640, 480)方法，獲取圖片像素信息，然后轉(zhuǎn)成字符串發(fā)到后臺。經(jīng)測，該方法比toDataURL()確實快不少，大致在5ms左右。但是將它轉(zhuǎn)成JSON字符串，則很慢很慢。

最后查到，toDataURL("image/jpeg")會加快速度，因為這里不需要計算Alpha通道。實測，小于10ms。

之前有擔(dān)心的網(wǎng)絡(luò)傳輸耗時問題，倒是得到了證實，這個擔(dān)心是沒有必要的。因為是本地傳輸，通過websocket傳輸一張圖片（小尺寸或者大尺寸）base64字符串大小的內(nèi)容，耗時都很小，算下來FPS能夠上50。

不確定自己在實現(xiàn)上是否哪里出了問題，導(dǎo)致這么高的CPU使用率。但不管怎么，還是放棄了這個方案。

竟然都使用上了QT，就大步向前走好了，畢竟這樣的圖像處理程序，還是做桌面應(yīng)用是做合適的。況且QT體系中的QML語言，能夠使用JS，學(xué)起來有點像在學(xué)一個新的前端MVVM框架，好感度和信心瞬間提升不少。

使用QML做界面，使用Camera和VideoOutput組件進(jìn)行攝像頭視頻的實時顯示，這里能指定顯示分辨率和FPS，很方便；配合使用QVideoFilterRunnable和QAbstractVideoFilter類對幀進(jìn)行處理，異步返回給主界面人臉檢測的結(jié)果；opencv和另外一個能做人臉識別的C++庫Dlib結(jié)合使用，能夠完成640 * 480尺寸的30FPS處理。

再優(yōu)化！給每一幀圖片進(jìn)行人臉識別，速度和識別能力都可以提高，就是通過Dlib中提供的Video Object Tracking來完成。一旦對某一幀能夠檢測到人臉之后，對之后的幀執(zhí)行該人臉區(qū)域圖像的tracking。這樣做的效果能夠獲得更高的FPS，同時tracking還能完成更遠(yuǎn)距離臉部的捕獲。

到這里，方案才覺得差不多了。

面對項目中自己的未知領(lǐng)域，如果不缺錢，那么直接買商業(yè)解決方案。Visage Tech提供的HTML5的人臉識別解決方案（好像用了WebAssembly），簡直{{BANNED}}：快速！準(zhǔn)確！穩(wěn)定！核心科技就是和我們這些小打小鬧的不一樣。

如果不購買商用解決方案，那么應(yīng)該盡量找到能夠幫助自己的朋友，指條正確的方向能夠節(jié)省很多調(diào)查摸索的時間。比如，如果需求要求程序在拍照時還能控制外接的燈泡，完成閃光燈的效果。那么如何使用軟件完成對外部硬件的控制呢？這樣的功能對于我這個非計算機(jī)專業(yè)的而言，真是蒙圈了。最后還是經(jīng)歷的大半天的摸索，才找到GPIO的解決辦法。

提高編程的素養(yǎng)，擴(kuò)大自己的興趣面，熱愛技術(shù)，善于google，邏輯思路清晰，那么在面對不熟悉的領(lǐng)域，新的技術(shù)，也能夠找到解決方案。并且這個過程能讓自己獲得不少知識，face detection， object tracking， tracking.js， webcamJS， getUserMedia()， toDataURL()的性能，opencv，dlib，QML，GPIO，樹莓派，我還差點去現(xiàn)學(xué)了Python。這些東西沒有必要都是深究，但是知道他們的存在，會給擴(kuò)展自己的思路。