最近picojs上了Github Trending,这是一个小巧的人脸检测库,200行JS,2K大小,性能很好,效果也还还行。于是我想有没其他的能在浏览器跑的人脸检测库,一查才发现OpenCV已经支持编译到WebAssembly,也就可以直接在浏览器里使用了。
编译OpenCV.js
安装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,然后通过binaryen的asm2wasm转成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
,可以复制到其他地方使用,而opencv_js.js
是中间生成的asm.js,可以忽略。
加载OpenCV
我们可以直接在HTML页面里引用opencv.js
,它会自动加载opencv_js.wasm
然后完成编译。遇到的第一个问题是,opencv.js
默认会加载根目录的opencv_js.wasm
,而我们通常会把js文件放在二级目录里。第二个问题是,我们的代码必须在OpenCV编译完成之后才能调用,不会代码就直接出错了。
更新2018-08-20:在Emscripten v1.38.9,locateFile
行为已经修改,不需要这个hack了。
为了解决以上的问题,要通过Module
进行配置:
Module
是Emscripten生成的全局对象,通过它可以配置和调用Emscripten的API。例如locateFile
用配置文件的实际URL。
preRun
会在初始化前前调用,在这个时候,OpenCV还没初始化,我们可以先用Emscripten的文件系统API预加载之后会用的文件,这里我加载了一个预训练好的模型data/haarcascade_frontalface_default.xml
,存放在Emscripten文件系统的"/face.xml"。
postRun
会在初始化完成之后执行,这时候OpenCV编译完成,可以使用cv
模块了。
获取摄像头图像
首先我们需要一个video标签,然后打开摄像头:
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
来读取摄像头了:
// 创建VideoCapture
let cap = new cv.VideoCapture(video);
// 创建存放图像的Mat
let src = new cv.Mat(videoHeight, videoWidth, cv.CV_8UC4);
// 读一帧图像
cap.read(src);
Haar Cascades人脸检测
创建人脸检测器:
faceCascade = new cv.CascadeClassifier();
faceCascade.load("face.xml")
接着就可以循环读取图像,检查人脸,显示了:
// 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好,代价是需要加载很大的JS和wasm,初始化慢。
完整代码:learn_ml/opencv.js