昨天晚上突然收到导师催促上交论文的消息,立即开工!

0x00.emsdk

官网:https://emscripten.org/
安装教程:https://emscripten.org/docs/getting_started/downloads.html

Emscripten,一款LLVM-to-JavaScript的编译器,将C++的底层函数编译成可以直接在浏览器端运行的asm.js或者WebAssembly。而OpenCV.js是通过该EmscriptenOpenCV的函数编译进asm.jsWebAssembly中,并提供JS APIsweb应用使用。

Emscripten可以把C/C++程序编译成asm.js,然后通过binaryenasm2wasm转成WebAssembly

之所以没用txy的机子是因为部分依赖源在国外,因此用Skysilk这台机子。
git clone https://github.com/juj/emsdk.git
cd emsdk

1
[root@CentOS emsdk]# ./emsdk update-tags
2
Fetching all tags from Emscripten Github repository...
3
Done. 159 tagged releases available, latest is 1.38.31.
4
Fetching all tags from Binaryen Github repository...
5
Done. 86 tagged Binaryen releases available, latest is 1.38.31.
6
Fetching all precompiled tagged releases..
7
Downloading: /root/emsdk/llvm-tags-32bit.txt from https://s3.amazonaws.com/mozilla-games/emscripten/packages/llvm/tag/linux_32bit/index.txt
8
Downloading: /root/emsdk/llvm-tags-64bit.txt from https://s3.amazonaws.com/mozilla-games/emscripten/packages/llvm/tag/linux_64bit/index.txt, 2379 Bytes
9
Downloading: /root/emsdk/upstream/lkgr.json from https://storage.googleapis.com/wasm-llvm/builds/linux/lkgr.json, 4414 Bytes
1
[root@CentOS emsdk]# ./emsdk install latest
2
Installing SDK 'sdk-1.38.31-64bit'..
3
Installing tool 'clang-e1.38.31-64bit'..
4
Downloading: /root/emsdk/zips/emscripten-llvm-e1.38.31.tar.gz from https://s3.amazonaws.com/mozilla-games/emscripten/packages/llvm/tag/linux_64bit/emscripten-llvm-e1.38.31.tar.gz, 392225846 Bytes
5
Unpacking '/root/emsdk/zips/emscripten-llvm-e1.38.31.tar.gz' to '/root/emsdk/clang/e1.38.31_64bit'
6
Done installing tool 'clang-e1.38.31-64bit'.
7
Installing tool 'node-8.9.1-64bit'..
8
Downloading: /root/emsdk/zips/node-v8.9.1-linux-x64.tar.xz from https://s3.amazonaws.com/mozilla-games/emscripten/packages/node-v8.9.1-linux-x64.tar.xz, 11387108 Bytes
9
Unpacking '/root/emsdk/zips/node-v8.9.1-linux-x64.tar.xz' to '/root/emsdk/node/8.9.1_64bit'
10
Done installing tool 'node-8.9.1-64bit'.
11
Installing tool 'emscripten-1.38.31'..
12
Downloading: /root/emsdk/zips/1.38.31.tar.gz from https://github.com/kripken/emscripten/archive/1.38.31.tar.gz
13
Unpacking '/root/emsdk/zips/1.38.31.tar.gz' to '/root/emsdk/emscripten/1.38.31'
14
Done installing tool 'emscripten-1.38.31'.
15
Done installing SDK 'sdk-1.38.31-64bit'.
1
[root@CentOS emsdk]# ./emsdk activate latest
2
Writing .emscripten configuration file to user home directory /root/
3
The Emscripten configuration file /root/.emscripten has been rewritten with the following contents:
4
5
import os
6
LLVM_ROOT = '/root/emsdk/clang/e1.38.31_64bit'
7
EMSCRIPTEN_NATIVE_OPTIMIZER = '/root/emsdk/clang/e1.38.31_64bit/optimizer'
8
BINARYEN_ROOT = '/root/emsdk/clang/e1.38.31_64bit/binaryen'
9
NODE_JS = '/root/emsdk/node/8.9.1_64bit/bin/node'
10
EMSCRIPTEN_ROOT = '/root/emsdk/emscripten/1.38.31'
11
SPIDERMONKEY_ENGINE = ''
12
V8_ENGINE = ''
13
TEMP_DIR = '/tmp'
14
COMPILER_ENGINE = NODE_JS
15
JS_ENGINES = [NODE_JS]
16
17
To conveniently access the selected set of tools from the command line, consider adding the following directories to PATH, or call 'source ./emsdk_env.sh' to do this for you.
18
19
   /root/emsdk:/root/emsdk/clang/e1.38.31_64bit:/root/emsdk/node/8.9.1_64bit/bin:/root/emsdk/emscripten/1.38.31
20
Set the following tools as active:
21
   clang-e1.38.31-64bit
22
   node-8.9.1-64bit
23
   emscripten-1.38.31
1
[root@CentOS emsdk]# source ./emsdk_env.sh
2
Adding directories to PATH:
3
PATH += /root/emsdk
4
PATH += /root/emsdk/clang/e1.38.31_64bit
5
PATH += /root/emsdk/node/8.9.1_64bit/bin
6
PATH += /root/emsdk/emscripten/1.38.31
7
8
Setting environment variables:
9
EMSDK = /root/emsdk
10
EM_CONFIG = /root/.emscripten
11
LLVM_ROOT = /root/emsdk/clang/e1.38.31_64bit
12
EMSCRIPTEN_NATIVE_OPTIMIZER = /root/emsdk/clang/e1.38.31_64bit/optimizer
13
BINARYEN_ROOT = /root/emsdk/clang/e1.38.31_64bit/binaryen
14
EMSDK_NODE = /root/emsdk/node/8.9.1_64bit/bin/node
15
EMSCRIPTEN = /root/emsdk/emscripten/1.38.31
1
[root@CentOS emsdk]# echo ${EMSCRIPTEN}
2
/root/emsdk/emscripten/1.38.31

0x01.OpenCV.js

随着HTML5的兴起,在web端使用图像处理相关技术显得尤为重要,OpenCV.jsJavascript开发者与OpenCV之间搭建了桥梁。起初是由Intel公司发起的一项研究,后在2017年并入到OpenCV项目中。

安装教程:https://docs.opencv.org/master/d4/da1/tutorial_js_setup.html
官方示例页面:Face Detection in Video Capture
这就是最终效果,其实直接从这里拿应该也可以的(逃……
git clone https://github.com/opencv/opencv.git

默认是编译成asm.js版本,如果需要编译成WebAssembly的版本,加上后缀--build_wasm

1
[root@CentOS opencv]# python ./platforms/js/build_js.py build_wasm --build_wasm
2
Args: Namespace(build_dir='build_wasm', build_doc=False, build_test=False, build_wasm=True, clean_build_dir=False, config_only=False, disable_wasm=False, emscripten_dir='/root/emsdk/emscripten/1.38.31', enable_exception=False, opencv_dir='/root/opencv', skip_config=False)
3
Check dir /root/opencv/build_wasm (create: True, clean: False)
4
Check dir /root/opencv (create: False, clean: False)
5
Check dir /root/emsdk/emscripten/1.38.31 (create: False, clean: False)
6
=====
7
===== Config OpenCV.js build for wasm
8
=====
9
Executing: ['cmake', '-DCMAKE_BUILD_TYPE=Release', "-DCMAKE_TOOLCHAIN_FILE='/root/emsdk/emscripten/1.38.31/cmake/Modules/Platform/Emscripten.cmake'", "-DCPU_BASELINE=''", "-DCPU_DISPATCH=''", '-DCV_TRACE=OFF', '-DBUILD_SHARED_LIBS=OFF', '-DWITH_1394=OFF', '-DWITH_ADE=OFF', '-DWITH_VTK=OFF', '-DWITH_EIGEN=OFF', '-DWITH_FFMPEG=OFF', '-DWITH_GSTREAMER=OFF', '-DWITH_GTK=OFF', '-DWITH_GTK_2_X=OFF', '-DWITH_IPP=OFF', '-DWITH_JASPER=OFF', '-DWITH_JPEG=OFF', '-DWITH_WEBP=OFF', '-DWITH_OPENEXR=OFF', '-DWITH_OPENGL=OFF', '-DWITH_OPENVX=OFF', '-DWITH_OPENNI=OFF', '-DWITH_OPENNI2=OFF', '-DWITH_PNG=OFF', '-DWITH_TBB=OFF', '-DWITH_PTHREADS_PF=OFF', '-DWITH_TIFF=OFF', '-DWITH_V4L=OFF', '-DWITH_OPENCL=OFF', '-DWITH_OPENCL_SVM=OFF', '-DWITH_OPENCLAMDFFT=OFF', '-DWITH_OPENCLAMDBLAS=OFF', '-DWITH_GPHOTO2=OFF', '-DWITH_LAPACK=OFF', '-DWITH_ITT=OFF', '-DWITH_QUIRC=OFF', '-DBUILD_ZLIB=ON', '-DBUILD_opencv_apps=OFF', '-DBUILD_opencv_calib3d=ON', '-DBUILD_opencv_dnn=ON', '-DBUILD_opencv_features2d=ON', '-DBUILD_opencv_flann=ON', '-DBUILD_opencv_gapi=OFF', '-DBUILD_opencv_ml=OFF', '-DBUILD_opencv_photo=ON', '-DBUILD_opencv_imgcodecs=OFF', '-DBUILD_opencv_shape=OFF', '-DBUILD_opencv_videoio=OFF', '-DBUILD_opencv_videostab=OFF', '-DBUILD_opencv_highgui=OFF', '-DBUILD_opencv_superres=OFF', '-DBUILD_opencv_stitching=OFF', '-DBUILD_opencv_java=OFF', '-DBUILD_opencv_java_bindings_generator=OFF', '-DBUILD_opencv_js=ON', '-DBUILD_opencv_python2=OFF', '-DBUILD_opencv_python3=OFF', '-DBUILD_opencv_python_bindings_generator=OFF', '-DBUILD_EXAMPLES=OFF', '-DBUILD_PACKAGE=OFF', '-DBUILD_TESTS=OFF', '-DBUILD_PERF_TESTS=OFF', '-DBUILD_DOCS=OFF', "-DCMAKE_C_FLAGS='-s WASM=1 '", "-DCMAKE_CXX_FLAGS='-s WASM=1 '", '/root/opencv']
10
Traceback (most recent call last):
11
  File "./platforms/js/build_js.py", line 227, in <module>
12
    builder.config()
13
  File "./platforms/js/build_js.py", line 167, in config
14
    execute(cmd)
15
  File "./platforms/js/build_js.py", line 25, in execute
16
    raise Fail("Execution failed: %d / %s" % (e.errno, e.strerror))
17
__main__.Fail: Execution failed: 13 / Permission denied

神奇的玄学bug……

Note
It requirespythonandcmakeinstalled in your development environment.

唔,yum install cmake

1
[root@CentOS opencv]# python ./platforms/js/build_js.py build_wasm --build_wasm --emscripten_dir=/root/emsdk
2
Args: Namespace(build_dir='build_wasm', build_doc=False, build_test=False, build_wasm=True, clean_build_dir=False, config_only=False, disable_wasm=False, emscripten_dir='/root/emsdk', enable_exception=False, opencv_dir='/root/opencv', skip_config=False)
3
Check dir /root/opencv/build_wasm (create: True, clean: False)
4
Check dir /root/opencv (create: False, clean: False)
5
Check dir /root/emsdk (create: False, clean: False)
6
=====
7
===== Config OpenCV.js build for wasm
8
=====
9
Executing: ['cmake', '-DCMAKE_BUILD_TYPE=Release', "-DCMAKE_TOOLCHAIN_FILE='/root/emsdk/cmake/Modules/Platform/Emscripten.cmake'", "-DCPU_BASELINE=''", "-DCPU_DISPATCH=''", '-DCV_TRACE=OFF', '-DBUILD_SHARED_LIBS=OFF', '-DWITH_1394=OFF', '-DWITH_ADE=OFF', '-DWITH_VTK=OFF', '-DWITH_EIGEN=OFF', '-DWITH_FFMPEG=OFF', '-DWITH_GSTREAMER=OFF', '-DWITH_GTK=OFF', '-DWITH_GTK_2_X=OFF', '-DWITH_IPP=OFF', '-DWITH_JASPER=OFF', '-DWITH_JPEG=OFF', '-DWITH_WEBP=OFF', '-DWITH_OPENEXR=OFF', '-DWITH_OPENGL=OFF', '-DWITH_OPENVX=OFF', '-DWITH_OPENNI=OFF', '-DWITH_OPENNI2=OFF', '-DWITH_PNG=OFF', '-DWITH_TBB=OFF', '-DWITH_PTHREADS_PF=OFF', '-DWITH_TIFF=OFF', '-DWITH_V4L=OFF', '-DWITH_OPENCL=OFF', '-DWITH_OPENCL_SVM=OFF', '-DWITH_OPENCLAMDFFT=OFF', '-DWITH_OPENCLAMDBLAS=OFF', '-DWITH_GPHOTO2=OFF', '-DWITH_LAPACK=OFF', '-DWITH_ITT=OFF', '-DWITH_QUIRC=OFF', '-DBUILD_ZLIB=ON', '-DBUILD_opencv_apps=OFF', '-DBUILD_opencv_calib3d=ON', '-DBUILD_opencv_dnn=ON', '-DBUILD_opencv_features2d=ON', '-DBUILD_opencv_flann=ON', '-DBUILD_opencv_gapi=OFF', '-DBUILD_opencv_ml=OFF', '-DBUILD_opencv_photo=ON', '-DBUILD_opencv_imgcodecs=OFF', '-DBUILD_opencv_shape=OFF', '-DBUILD_opencv_videoio=OFF', '-DBUILD_opencv_videostab=OFF', '-DBUILD_opencv_highgui=OFF', '-DBUILD_opencv_superres=OFF', '-DBUILD_opencv_stitching=OFF', '-DBUILD_opencv_java=OFF', '-DBUILD_opencv_java_bindings_generator=OFF', '-DBUILD_opencv_js=ON', '-DBUILD_opencv_python2=OFF', '-DBUILD_opencv_python3=OFF', '-DBUILD_opencv_python_bindings_generator=OFF', '-DBUILD_EXAMPLES=OFF', '-DBUILD_PACKAGE=OFF', '-DBUILD_TESTS=OFF', '-DBUILD_PERF_TESTS=OFF', '-DBUILD_DOCS=OFF', "-DCMAKE_C_FLAGS='-s WASM=1 '", "-DCMAKE_CXX_FLAGS='-s WASM=1 '", '/root/opencv']
10
Re-run cmake no build system arguments
11
CMake Error at CMakeLists.txt:29 (cmake_minimum_required):
12
  CMake 3.5.1 or higher is required.  You are running version 2.8.12.2
13
14
15
-- Configuring incomplete, errors occurred!
16
Traceback (most recent call last):
17
  File "./platforms/js/build_js.py", line 227, in <module>
18
    builder.config()
19
  File "./platforms/js/build_js.py", line 167, in config
20
    execute(cmd)
21
  File "./platforms/js/build_js.py", line 23, in execute
22
    raise Fail("Child returned: %s" % retcode)
23
__main__.Fail: Child returned: 1

emmm

1
[root@CentOS ~]# cmake
2
cmake version 2.8.12.2

溜了溜了
停电了XD,未完待续……
所以需要升级cmake
yum install -y gcc gcc-c++ make automake
下载源码:https://cmake.org/download/
wget https://github.com/Kitware/CMake/releases/download/v3.14.4/cmake-3.14.4.tar.gz
tar -zxvf cmake-3.14.4.tar.gz
cd cmake-3.14.4
./bootstrap
gmake
gmake install
升级完成

1
[root@CentOS opencv]# cmake -version
2
cmake version 3.14.4
3
4
CMake suite maintained and supported by Kitware (kitware.com/cmake).

于是恢复之前的

1
[root@CentOS opencv]# python ./platforms/js/build_js.py build_wasm --build_wasm
2
Args: Namespace(build_dir='build_wasm', build_doc=False, build_test=False, build_wasm=True, clean_build_dir=False, config_only=False, disable_wasm=False, emscripten_dir='/root/emsdk/emscripten/1.38.31', enable_exception=False, opencv_dir='/root/opencv', skip_config=False)
3
Check dir /root/opencv/build_wasm (create: True, clean: False)
4
Check dir /root/opencv (create: False, clean: False)
5
Check dir /root/emsdk/emscripten/1.38.31 (create: False, clean: False)
6
=====
7
===== Config OpenCV.js build for wasm
8
=====
9
Executing: ['cmake', '-DCMAKE_BUILD_TYPE=Release', "-DCMAKE_TOOLCHAIN_FILE='/root/emsdk/emscripten/1.38.31/cmake/Modules/Platform/Emscripten.cmake'", "-DCPU_BASELINE=''", "-DCPU_DISPATCH=''", '-DCV_TRACE=OFF', '-DBUILD_SHARED_LIBS=OFF', '-DWITH_1394=OFF', '-DWITH_ADE=OFF', '-DWITH_VTK=OFF', '-DWITH_EIGEN=OFF', '-DWITH_FFMPEG=OFF', '-DWITH_GSTREAMER=OFF', '-DWITH_GTK=OFF', '-DWITH_GTK_2_X=OFF', '-DWITH_IPP=OFF', '-DWITH_JASPER=OFF', '-DWITH_JPEG=OFF', '-DWITH_WEBP=OFF', '-DWITH_OPENEXR=OFF', '-DWITH_OPENGL=OFF', '-DWITH_OPENVX=OFF', '-DWITH_OPENNI=OFF', '-DWITH_OPENNI2=OFF', '-DWITH_PNG=OFF', '-DWITH_TBB=OFF', '-DWITH_PTHREADS_PF=OFF', '-DWITH_TIFF=OFF', '-DWITH_V4L=OFF', '-DWITH_OPENCL=OFF', '-DWITH_OPENCL_SVM=OFF', '-DWITH_OPENCLAMDFFT=OFF', '-DWITH_OPENCLAMDBLAS=OFF', '-DWITH_GPHOTO2=OFF', '-DWITH_LAPACK=OFF', '-DWITH_ITT=OFF', '-DWITH_QUIRC=OFF', '-DBUILD_ZLIB=ON', '-DBUILD_opencv_apps=OFF', '-DBUILD_opencv_calib3d=ON', '-DBUILD_opencv_dnn=ON', '-DBUILD_opencv_features2d=ON', '-DBUILD_opencv_flann=ON', '-DBUILD_opencv_gapi=OFF', '-DBUILD_opencv_ml=OFF', '-DBUILD_opencv_photo=ON', '-DBUILD_opencv_imgcodecs=OFF', '-DBUILD_opencv_shape=OFF', '-DBUILD_opencv_videoio=OFF', '-DBUILD_opencv_videostab=OFF', '-DBUILD_opencv_highgui=OFF', '-DBUILD_opencv_superres=OFF', '-DBUILD_opencv_stitching=OFF', '-DBUILD_opencv_java=OFF', '-DBUILD_opencv_java_bindings_generator=OFF', '-DBUILD_opencv_js=ON', '-DBUILD_opencv_python2=OFF', '-DBUILD_opencv_python3=OFF', '-DBUILD_opencv_python_bindings_generator=OFF', '-DBUILD_EXAMPLES=OFF', '-DBUILD_PACKAGE=OFF', '-DBUILD_TESTS=OFF', '-DBUILD_PERF_TESTS=OFF', '-DBUILD_DOCS=OFF', "-DCMAKE_C_FLAGS='-s WASM=1 '", "-DCMAKE_CXX_FLAGS='-s WASM=1 '", '/root/opencv']
10
Re-run cmake no build system arguments
11
CMake Error at /root/emsdk/emscripten/1.38.31/cmake/Modules/Platform/Emscripten.cmake:112 (message):
12
  Failed to fetch compiler version information with command
13
  "'/root/emsdk/emscripten/1.38.31/emcc' -v"! Process returned with error
14
  code 1.
15
Call Stack (most recent call first):
16
  /usr/local/share/cmake-3.14/Modules/CMakeDetermineSystem.cmake:93 (include)
17
  CMakeLists.txt:135 (project)
18
19
20
CMake Error: CMake was unable to find a build program corresponding to "Unix Makefiles".  CMAKE_MAKE_PROGRAM is not set.  You probably need to select a different build tool.
21
-- Configuring incomplete, errors occurred!
22
Traceback (most recent call last):
23
  File "./platforms/js/build_js.py", line 227, in <module>
24
    builder.config()
25
  File "./platforms/js/build_js.py", line 167, in config
26
    execute(cmd)
27
  File "./platforms/js/build_js.py", line 23, in execute
28
    raise Fail("Child returned: %s" % retcode)
29
__main__.Fail: Child returned: 1

又去试了下win,也不行,缺对应版本的Windows SDK……
搜了下还是算了吧不折腾了(这不就是我最开始的想法吗2333),https://stackoverflow.com/questions/49777780/can-anybody-generate-opencv-js

You can find a nightly build at https://docs.opencv.org/master/opencv.js and some useful stuff at https://docs.opencv.org/master/utils.js .
<script async src="https://docs.opencv.org/master/opencv.js" type="text/javascript"></script>

使用方法:https://docs.opencv.org/master/d0/d84/tutorial_js_usage.html

0x02.其他

更多JS的人脸识别库(Best face tracking and recognition related javascript libraries
tracking.js
clmtrackr
Headtrackr
CCV.js
以上几个都是比较流行的人脸识别的js库,有兴趣的同学可以关注一下。

0x03.引用

OpenCV.js 入门
用OpenCV在浏览器进行人脸检测