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

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

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

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

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

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

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

兩個庫一結合，就有了初步的解決方案，實現了功能，簡單快速。

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

使用的是羅技的1080P的網絡攝像頭，但是在瀏覽器上能夠看到的，好像并沒有以1080P的分辨率進行展示。嘗試了一些參數的修改，但是結果都不盡人意。

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

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

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

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

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

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

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

但是結果也不理想，原因如下。

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

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

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

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

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

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

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

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

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

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

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

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