Building OpenCV.js WebAssembly on MacOS

Updated:
Categories: Web
Tags: #WebAssembly #OpenCV

OpenCV 를 WebAssembly로 빌드

WebAssembly로 빌드하는 방법에 관한 OpenCV 문서를 참고해서 진행. 해당 문서는 OpenCV(C++) 를 Python 스크립트를 실행하여 WebAssembly 파일과 그 내부 함수에 접근할 수 있게 해주는 js 파일을 빌드하는 방법에 대해서 기술.

환경 설정 (MacOS)

Emscripten 설치

이전 글인 C/C++ 코드를 WebAssembly로 빌드하기 위한 Mac OS X 환경 설정을 참고.

주의:

  • Emscripten 환경변수를 현재 터미널에 적용하는 source ./emsdk_env.sh 명령어는 새로운 터미널로 빌드를 실행할 때 다시 한번 해줘야함. 안해줄 경우, emscripten_dir=None이라는 아래와 같은 메시지를 볼 수 있음.

    Args: Namespace(build_dir=’build_wasm’, build_doc=False, build_test=False, build_wasm=True, clean_build_dir=False, config_only=False, emscripten_dir=None, enable_exception=False, opencv_dir=’{opencv path}’, skip_config=False) Cannot get Emscripten path, please specify it either by EMSCRIPTEN environment variable or –emscripten_dir option.

Python 설정

Python 2.7.10 사용. 다른 개발 환경 설정 시 다른 버전을 필요할 수도 있다면 pyenv를 설치해서 사용하는걸 추천.

$ brew install pyenv
$ pyenv init
# Load pyenv automatically by appending
# the following to ~/.bash_profile:

eval "$(pyenv init -)"

~/.bash_profile 파일에 접근해서 eval "$(pyenv init -)"를 추가하고 적용.

$ vi ~/.bash_profile
# eval "$(pyenv init -)" 추가
$ source ~/.bash_profile

위의 과정을 진행한 후에도 Install 할 때 에러가 발생한다면 다른 터미널을 열고 실행. OpenCV 폴더로 이동해서 해당 폴더에서 사용할 파이썬 버전 설정.

$ pyenv install 2.7.10
$ cd {opencv project}
$ pyenv local 2.7.10
$ pyenv versions
  system
* 2.7.10 (set by {현재 프로젝트 경로}/.python-version)
  3.7.0

주의:

CMake(Cross Platform Make) 설치

CMake 는 크로스플랫폼 환경에서 빌드, test, 패키징하기 위한 오픈소스 도구. OpenCV 내 모듈들을 빌드하기 위해 필요.

$ brew install cmake

빌드

OpenCV Git repository에서 코드를 받은 뒤 v3.4으로 빌드하면 {OpenCV 프로젝트 폴더}/build_wasm/bin 폴더에 opencv_js.js, opencv_js.wasm, opencv.js 파일들이 나옴. 아무런 파라미터가 없다면 asm.js 버전으로 빌드되며, --build_wasm 파라미터를 추가해줘야 wasm 파일로 빌드됨.

$ git clone https://github.com/opencv/opencv.git
$ cd opencv
$ git checkout -t origin/3.4
$ python ./platforms/js/build_js.py build_wasm --build_wasm

테스트

필요한 객체가 다 있는지 확인해보기 위해서 웹서버를 아래 프로젝트 구조처럼 만들고 index.html 파일을 접근하여 확인.

root
│   index.html
└───js
    │ opencv_js.wasm
    └ opencv.js

주의:

  • 커스텀 빌드하는 과정에서 매칭이 잘못된 경우는 js 바인딩이 되어 있는 것처럼 나와도 실제 해당 계산 실행 도중에 에러 발생 가능성이 존재.

결론

OpenCV 객체들이 다 바인딩되는 것은 아니고, 설정이 되어있는 것만 해줌. 따라서 OpenCV 라이브러리에 있는 원하는 API 또는 객체들을 사용하고 싶다면 빌드 설정을 커스텀해야함

Comments