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

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

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

抽其關(guān)鍵點(diǎn)：攝像頭，實(shí)時(shí)畫(huà)面，人臉檢測(cè)，和拍照

項(xiàng)目并沒(méi)有要求開(kāi)發(fā)應(yīng)用的類型，那么我肯定是先從自身?yè)碛械募寄艹霭l(fā)，看是否能尋求解決方案。身為前端，深知前端技術(shù)潛力無(wú)限，肯定有自己還不知道的技術(shù)。果不其然，找到了Tracking.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最后查到，toDataURL("image/jpeg")會(huì)加快速度，因?yàn)檫@里不需要計(jì)算Alpha通道。實(shí)測(cè)，小于10ms。

之前有擔(dān)心的網(wǎng)絡(luò)傳輸耗時(shí)問(wèn)題，倒是得到了證實(shí)，這個(gè)擔(dān)心是沒(méi)有必要的。因?yàn)槭潜镜貍鬏?，通過(guò)websocket傳輸一張圖片（小尺寸或者大尺寸）base64字符串大小的內(nèi)容，耗時(shí)都很小，算下來(lái)FPS能夠上50。

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

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

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

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

到這里，方案才覺(jué)得差不多了。

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

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

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