摘要：最近上了，這是一個(gè)小巧的人臉檢測(cè)庫(kù)，行，大小，性能很好，效果也還還行。于是我想有沒(méi)其他的能在瀏覽器跑的人臉檢測(cè)庫(kù)，一查才發(fā)現(xiàn)已經(jīng)支持編譯到，也就可以直接在瀏覽器里使用了。

最近picojs上了Github Trending，這是一個(gè)小巧的人臉檢測(cè)庫(kù)，200行JS，2K大小，性能很好，效果也還還行。于是我想有沒(méi)其他的能在瀏覽器跑的人臉檢測(cè)庫(kù)，一查才發(fā)現(xiàn)OpenCV已經(jīng)支持編譯到WebAssembly，也就可以直接在瀏覽器里使用了。

安裝Emscripten SDK：

git clone https://github.com/juj/emsdk.git
cd emsdk
./emsdk update-tags
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

Emscripten可以把C/C++程序編譯成asm.js，然后通過(guò)binaryen的asm2wasm轉(zhuǎn)成WebAssembly。

接著就可以編譯OpenCV了：

wget https://github.com/opencv/opencv/archive/3.4.1.zip
unzip 3.4.1.zip
cd opencv-3.4.1
python ./platforms/js/build_js.py build_wasm --build_wasm

編譯的成果在build_wasm/bin：

$ ls -lh build_wasm/bin/
total 5.5M
-rw-r--r-- 1 lyp lyp 263K Apr 26 22:10 opencv.js
-rw-r--r-- 1 lyp lyp 262K Apr 26 22:10 opencv_js.js
-rw-r--r-- 1 lyp lyp 5.0M Apr 26 22:10 opencv_js.wasm

我們只需要其中的opencv.js和opencv_js.wasm，可以復(fù)制到其他地方使用，而opencv_js.js是中間生成的asm.js，可以忽略。

我們可以直接在HTML頁(yè)面里引用opencv.js，它會(huì)自動(dòng)加載opencv_js.wasm然后完成編譯。遇到的第一個(gè)問(wèn)題是，opencv.js默認(rèn)會(huì)加載根目錄的opencv_js.wasm，而我們通常會(huì)把js文件放在二級(jí)目錄里。第二個(gè)問(wèn)題是，我們的代碼必須在OpenCV編譯完成之后才能調(diào)用，不會(huì)代碼就直接出錯(cuò)了。

更新2018-08-20：在Emscripten v1.38.9，locateFile行為已經(jīng)修改，不需要這個(gè)hack了。

為了解決以上的問(wèn)題，要通過(guò)Module進(jìn)行配置：

Module是Emscripten生成的全局對(duì)象，通過(guò)它可以配置和調(diào)用Emscripten的API。例如locateFile用配置文件的實(shí)際URL。

preRun會(huì)在初始化前前調(diào)用，在這個(gè)時(shí)候，OpenCV還沒(méi)初始化，我們可以先用Emscripten的文件系統(tǒng)API預(yù)加載之后會(huì)用的文件，這里我加載了一個(gè)預(yù)訓(xùn)練好的模型data/haarcascade_frontalface_default.xml，存放在Emscripten文件系統(tǒng)的"/face.xml"。

postRun會(huì)在初始化完成之后執(zhí)行，這時(shí)候OpenCV編譯完成，可以使用cv模塊了。

首先我們需要一個(gè)video標(biāo)簽，然后打開(kāi)攝像頭：

async function startCamera() {
    let video = document.getElementById("video");
    let stream = await navigator.mediaDevices.getUserMedia({
            video: {
                width: {
                    exact: videoWidth
                },
                height: {
                    exact: videoHeight
                }
            },
            audio: false
        })
    video.srcObject = stream;
    video.play();
}

然后我們就可以用cv.VideoCapture來(lái)讀取攝像頭了：

// 創(chuàng)建VideoCapture
let cap = new cv.VideoCapture(video);
// 創(chuàng)建存放圖像的Mat
let src = new cv.Mat(videoHeight, videoWidth, cv.CV_8UC4);
// 讀一幀圖像
cap.read(src);

創(chuàng)建人臉檢測(cè)器：

faceCascade = new cv.CascadeClassifier();
faceCascade.load("face.xml")

接著就可以循環(huán)讀取圖像，檢查人臉，顯示了：

// Capture a frame
cap.read(src)

// Convert to greyscale
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);

// Downsample
let downSampled = new cv.Mat();
cv.pyrDown(gray, downSampled);
cv.pyrDown(downSampled, downSampled);

// Detect faces
let faces = new cv.RectVector();
faceCascade.detectMultiScale(downSampled, faces)

// Draw boxes
let size = downSampled.size();
let xRatio = videoWidth / size.width;
let yRatio = videoHeight / size.height;
for (let i = 0; i < faces.size(); ++i) {
    let face = faces.get(i);
    let point1 = new cv.Point(face.x * xRatio, face.y * yRatio);
    let point2 = new cv.Point((face.x + face.width) * xRatio, (face.y + face.height) * xRatio);
    cv.rectangle(src, point1, point2, [255, 0, 0, 255])
}

// Show image
cv.imshow(outputCanvas, src)

// Cleanup
downSampled.delete()
faces.delete()

性能在30FPS左右，效果要比picojs好，代價(jià)是需要加載很大的JS和wasm，初始化慢。

完整代碼：learn_ml/opencv.js