咦？瀏覽器都能做人臉檢測了？

前言

人臉識別想到上學那會在學生街拍大頭貼的情景，延伸一點可以做圖片合成。

今日早讀文章由@你只配娛樂分享。

正文從這開始～

Shape Detection API 的發布已經有一些時日，其主要的提供的能力是給予前端直接可用的特徵檢測的介面（包括條形碼、人臉、文本檢測）。本文將簡單的對其進行介紹，對前端進行人臉檢測進行普適性的講解。

背景與場景

人臉檢測（Face Detection）算是老生常談的課題了，在諸多行業應用廣泛，例如金融、安防、電子商務、智能手機、娛樂圖片等行業。其中涉及的技術也在不斷的演變，下面簡要介紹幾種思路：

基於特徵的人臉檢測

例如opencv中內置了基於Viola-Jones目標檢測框架的Harr分類器，只需要載入一個配置文件（haarcascade_frontalface_alt.xml）就能直接調用detectObject去完成檢測過程，同時也支持其他特徵的檢測（如鼻子、嘴巴等）。

基於學習的人臉檢測，其實也是需要通過運算元提取的圖像中的局部特徵，通過對其進行分類、統計、回歸等方式得到的具備更精確和快響應的分類器。

套路集錦

後端處理

前端通過網路將資源傳輸到後端，後端統一處理需要檢測的圖像或視頻流，對後端的架構有一定的挑戰，同時網路的延時往往不能給用戶帶來實時的交互效果。

客戶端處理

得益於OpenCV在跨語言和跨平台的優勢，客戶端也能以較低的開發成本的提供人臉檢測的能力，並且可以通過JsBridge等方式向web容器提供服務，然而一旦脫離這個容器，孤立的頁面將失去這種能力。直到有一天……

開放服務

不知道從啥時候開始，雲計算等概念拔地而起，計算的成本日益降低。各大研發團隊（如阿里雲、Face++）都蠢蠢欲動又不緊不慢的上架了人臉檢測服務，甚至還帶上了各種特！殊！服！務！，人臉識別、活體識別、證件OCR及人臉對比等等等。

儘管不僅提供了客戶端的SDK以及前後端的API，但是，怎麼說也要講講我純前端的方案吧。

時代帶來了什麼

好吧，人臉識別在前端依然是在刀耕火種的遠古時代，然而，我們的基礎建設已經起步，希望後續的一些相關介紹能為各位看官帶來一定的啟發。

Shape Detection API

隨著客戶端硬體的計算能力逐漸提高，瀏覽器層面得到的許可權也越來越多，由於圖像處理需要耗費大量的計算資源，實際上瀏覽器上也能承擔圖像檢測的一些工作，因此就搞出了個Shape Detection API。

以下幾個簡單的例子介紹了基本的用法，在嘗試編輯並運行這些代碼之前，請確保在你的Chrome版本以及該新特性已經被激活，另外該API受同源策略所限制：

chrome://flags/#enable-experimental-web-platform-features

條形碼：Barcode Detection (For Chrome 56+)

varbarcodeDetector=newBarcodeDetector();

barcodeDetector.detect(image)

.then(barcodes=>{

barcodes.forEach(barcode=>console.log(barcodes.rawValue))

})

.catch(err=>console.error(err));

人臉：Face Detection (For Chrome 56+)

varfaceDetector=newFaceDetector();

faceDetector.detect(image)

.then(faces=>faces.forEach(face=>console.log(face)))

.catch(err=>console.error(err));

文本：Text Detection (For Chrome 58+)

vartextDetector=newTextDetector();

textDetector.detect(image)

.then(boundingBoxes=>{

for(letboxofboundingBoxes){

speechSynthesis.speak(newSpeechSynthesisUtterance(box.rawValue));

}

})

.catch(err=>console.error(err));

圖像中的人臉檢測

圖像的人臉檢測比較簡單，只需要傳入一個圖片的元素，就能直接調起該API進行人臉識別了。然後接住canvas我們可以將檢測的結果展示出來。

核心代碼如下：

varimage=document.querySelector( #image );

varcanvas=document.querySelector( #canvas );

varctx=canvas.getContext("2d");

varscale=1;

image.onload=function(){

ctx.drawImage(image,

,,image.width,image.height,

,,canvas.width,canvas.height);

scale=canvas.width/image.width;

};

functiondetect(){

if(window.FaceDetector==undefined){

console.error( Face Detection not supported );

return;

}

varfaceDetector=newFaceDetector();

console.time( detect );

returnfaceDetector.detect(image)

.then(faces=>{

console.log(faces)

// Draw the faces on the .

varctx=canvas.getContext("2d");

ctx.lineWidth=2;

ctx.strokeStyle="red";

for(vari=;i

varitem=faces[i].boundingBox;

ctx.rect(Math.floor(item.x*scale),

Math.floor(item.y*scale),

Math.floor(item.width*scale),

Math.floor(item.height*scale));

ctx.stroke();

}

console.timeEnd( detect );

})

.catch((e)=>{

console.error("Boo, Face Detection failed: "+e);

});

}

視頻中的人臉檢測

視頻中的人臉檢測跟圖像相差不大，通過getUserMedia 可以打開攝像頭獲取視頻/麥克風的信息，通過將視頻幀進行檢測和展示，即可實現視頻中的人臉檢測。

核心代碼如下：

navigator.mediaDevices.getUserMedia({

video:true,

// audio: true

})

.then(function(mediaStream){

video.src=window.URL.createObjectURL(mediaStream);

video.onloadedmetadata=function(e){

// Do something with the video here.

};

})

.catch(function(error){

console.log(error.name);

});

setInterval(function(){

ctx.clearRect(,,canvas.width,canvas.height);

ctx.drawImage(video,,);

image.src=canvas.toDataURL( image/png );

image.onload=function(){

detect();

}

},60);

時光倒流到沒有API的日子

實際上，在很久很久以前，也有不少解決方案存在。由於硬體條件以及沒有硬體加速等限制的情況，一直沒有被廣泛地投入生產。

tracking.js

tracking.js 是一款js封裝的圖像處理的庫，為瀏覽器帶來豐富的計算視覺相關的演算法和技術，通過它可以實現顏色追蹤、人臉檢測等功能，具體特性如下：

jquery.facedetection

jquery.facedetection 是一款jquery / zepto 人臉檢測插件，基於跨終端能力超強的ccv中的圖像分類器和檢測器。

Node.js & OpenCv

node-opencv 模塊已經發布了有些年頭，儘管目前還不能完美兼容v3.x，提供的API也比較有限，但能完美兼容opencv v2.4.x。N-API的到來可能會帶來更多的驚喜。

設想一下在一個Electron或者Node-Webkit容器中，我們是否可以通過本地開啟websocket服務來實現實時的人臉檢測呢？實現的思路代碼如下：

後端處理邏輯

importcvfrom opencv ;

constdetectConfigFile= ./node_modules/opencv/data/haarcascade_frontalface_alt2.xml ;

// camera properties

constcamWidth=320;

constcamHeight=240;

constcamFps=10;

constcamInterval=1000/camFps;

// face detection properties

constrectColor=[,255,];

constrectThickness=2;

// initialize camera

constcamera=newcv.VideoCapture();

camera.setWidth(camWidth);

camera.setHeight(camHeight);

constframeHandler=(err,im)=>{

returnnewPromise((resolve,reject)=>{

if(err){

returnreject(err);

}

im.detectObject(detectConfigFile,{},(error,faces)=>{

if(error){

returnreject(error);

}

letface;

for(leti=;i

face=faces[i];

im.rectangle([face.x,face.y],[face.width,face.height],rectColor,rectThickness);

}

returnresolve(im);

});

});

};

module.exports=function(socket){

constframeSocketHanlder=(err,im)=>{

returnframeHandler(err,im)

.then((img)=>{

socket.emit( frame ,{

buffer:img.toBuffer(),

});

});

};

consthandler=()=>{

camera.read(frameSocketHanlder);

};

setInterval(handler,camInterval);

};

前端調用介面

socket.on( frame ,function(data){

varunit8Arr=newUint8Array(data.buffer);

varstr=String.fromCharCode.apply(null,unit8Arr);

varbase64String=btoa(str);

img.onload=function(){

ctx.drawImage(this,,,canvas.width,canvas.height);

}

img.src= data:image/png;base64, +base64String;

});

總結

未來的發展

這些前沿的技術將會在前端得到更為廣泛的應用和支持是毋庸置疑的，未來的圖像在前端也會隨著傳統圖像處理->學習+圖像處理的方式前進，這一切的功勞離不開基礎設施(硬體、瀏覽器、工具、庫等)的逐漸增強和完善，其中包括但不僅限於：

getUserMedia/Canvas => 圖像 / 視頻的操作

Shape Detection API => 圖像檢測

Web Workers => 並行計算能力

ConvNetJS => 深度學習框架

實際上並沒有那麼樂觀

準確率

對於正臉(多個)的識別率還是比較高的，但是在側臉已經有障礙物的情況下，檢測的效果並不理想。

處理速度

對於圖像中人臉檢測的例子2.2，耗費時間300ms+（實際上無法滿足大解析度視頻實時處理），是調用Opencv的檢測速度100ms的三倍之多。

特性

還有很多需要完善的地方：如不支持眼鏡狀態、性別、年齡估計、表情識別、人種、笑容、模糊檢測等主流服務提供商提供的服務。

參考

人臉識別技術大總結(1)：Face Detection & Alignment: http://blog.jobbole.com/85783/

阿里巴巴直播防控中的實人認證技術: https://xianzhi.aliyun.com/forum/mobile/read/635.html

前端在人工智慧時代能做些什麼？：https://yq.aliyun.com/articles/153198

ConvNetJS Deep Learning in your browser：http://cs.stanford.edu/people/karpathy/convnetjs/

Face detection using Shape Detection API：https://paul.kinlan.me/face-detection/

關於本文

作者：@你只配娛樂

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！