installing opencv.js probloms/how to install

opencv.js 는 c베이스로 만들어진 opencv를 js환경으로  동작하게만든 패키지입니다.
구동환경은 현제 3.1이며, https://github.com/ucisysarch/opencvjs
에서 다운로드 및 설치방법이 설명되어 있습니다.

하지만 현제 설치에 필요한 것들을 찾다보면 버전이 불일치하여, 설치에 번번히 실패하게 되는데, opencvjs 깃허브에서조차 뚜렷하게 설명된 글이 없으며, 마지막 업데이트도 반년이 넘어가고있습니다.

아래의 글은 현제 버전
파이썬 2.7
emsdk 1.38.8
opencv.js 3.1
버전에서 작동을 기준으로 하였으며, 이후 업데이트는 자신의 버전과 맞게끔 수동 설정이 필요로 합니다.

• 들어가기에 앞서..

우선 지옥같은 설치에 들어가기앞서, 매우 생소한 emsdk에 대해서 간단하게 살펴봅니다.
저는emsdk가 무엇인지 모른상태로 설치를했고, 결과적으로 수많은 시행착오를 가지게 되었기 때문에, 설치에 들어가기 앞서 배경을 대강이라도 이해가 필요함을 느꼇습니다.

제얼처음 언급했다싶이, opencv는 c/c++ 을 기준으로 만들어져 있습니다. 그런 이유로 js환경에서 구동을 위해서는 c코드를 js코드로 컨버팅이 필요로 합니다.
emsdk가 이 컨버팅을 돕는 프로그램입니다.

우리는 emsdk를 설치한 후에 opencvjs 패키지를 js용으로 컴파일 해야합니다.
이제 설치를 시작합니다.

• 설치는..

-windows-
https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html
에서 최신버전을 받아, 압축을 푼뒤
해당 디랙토리로 cmd로 가
1. emsdk update
2. emsdk install latest
3. emsdk activate latest
4. emcmdprompt.bat
를 하면 성공

-linux-
git으로 설치가 편합니다.

# Get the emsdk repo
git clone https://github.com/juj/emsdk.git

# Enter that directory
cd emsdk

하면 간단하게 복사가 되며,

1. emsdk update
2. emsdk install latest
3. emsdk activate latest
4. source emask_env.sh
를 하면 성공

별거없네요.
위의 홈페이지에도 동일하게 설명서가 있으며, 설치테스트도 쉽게 가능합니다.

설치가 끝난뒤, 이제 opencv.js를 설치합니다.
https://github.com/ucisysarch/opencvjs

• 이제 본격적인 지옥이 시작됩니다.

윈도우 리눅스 공통적으로 위 사이트의 installation을 따라 설치하면 되나,

두 운영체제가 공통적으로 겪는 문제는 아래와 같습니다.


1.

( 설명서에서 제시하는 emsdk버전)

성명서에서는 명확하게 emsdk버전을 명시합니다. 하지만 제가 시도했을땐, 두 운영체제 모두 설치가 실패합니다.
결과적으로 latest버전을 써도 무방합니다. 걱정하지말고 넘어갑니다.


2.

(diff 파일을 패치하는 방법을 설명합니다)

우선은 diff가 무엇인지 알아봐야 합니다.
unix계열에 있는 diff는 두 파일을 비교하여, 무엇이 추가되어있고, 무엇이 빠져있는지 정리가 되어있는 파일입니다. 유닉스 계열에서 설계되어있으므로 윈도우에는 공식적으로는 지원하지 않습니다.

patch 스크립트는, 위의 주어진 diff파일을 읽어들여, 현제 내 파일의 정보를 diff가 제공하는 정보에 맞게 수정하는 스크립트 입니다. 이 역시 유닉스용 입니다.

-linux-
환경에서는 간단합니다.
emsdk 설치 디렉토리로 이동후, 3번의 명령어를 치는데, patch_emscript_master.diff(이제 diff파일이라 부릅니다)의 full directory를 입력해 줍니다.
diff파일은 git으로 받은 opencvjs 폴더하에 존재합니다.

-windows-
환경에서는 diff파일을 읽어주는 서드파티 프로그램을 설치해야 합니다.
저의 경우는 수동으로 파일을 수정했습니다. diff파일을 메모장으로 열면, 어떤 파일의 어떤 라인을 수정하는지 정보가 존재합니다.

• 그럼 마음놓고 3번을 시행하지만.. 

역시 작동하지 않습니다.
이부분에서 막혀서 많은 유저들이 설치중 멘붕한것 같습니다 -_-

 (수많은 설치실패 문제로 고통받고있는 유저들..)

답은 간단하게도 diff파일이 잘못된 경로를 지정하고 있기 때문이며, diff파일을 수동으로 수정하면 됩니다.

에디터로 diff파일을 열어보면 ;

(diff파일 에디터로 열어본 상태...)

이러한 내용이 잔뜩 있습니다.

• 당황해 하지말고 살펴봅니다.

1번라인  : 경로상의 파일을 수정한다는 뜻 입니다. bind.h 파일 내부에
3번라인 : 999번 라인 다음의
4번 5번 라인 : 의 문자 다음에 존재하는
7번 라인 : 코드는 붉은색 하이라이트와 네거티브 - 표시가 되어있습니다.
이 뜻은 기존의 bind.h 파일에 적혀있는 코드입니다.
해당코드를
8번라인: 으로 바꿉니다.
그 뒤,
12번라인 : 1035번라인에서
13 14번라인 : 문자 다음에
16번라인 ~ : 해당코드를 추가합니다.

모두 풀어썻을때 이러한 뜻입니다.

• 이제 다시 코드를 면밀히 살펴봅니다.

혹은, 에러로그를 살펴봅니다.

에러로그는 diff파일의 1번과 2번 라인에 문제가 있다고 합니다.
과연, 실제로도 1번과 2번라인의 상대주소를 따라가보면, 경로가 조금 틀린것을 확인 할 수 있습니다.

(현제 제 버전의 기준에서는) master 폴더 대신 1.38.8 이라는 폴더가 그 자리를 대신하고 있습니다.

diff파일 또한 위 처럼 틀린 경로를 알맞게 수정해 줍니다.

 (수정된 코드의 일부분, 아래쪽에 또 수정이 필요한 코드가 있으니 꼼꼼히 살펴보세요)

위와 같이 모든 잘못된 경로들을 바로잡아주면, 비로쏘 patch가 올바르게 작동합니다.

이제 다시한번 emsdk install latest 를 입력 해 주면, opencvjs 를 컴파일 할 준비가 된 것 입니다!

opencvjs 로 이동후, python make.py를 입력합니다.


이제 설치가 정상적으로 끝이 납니다.


라고 생각했는데 또 다른 에러 터져서 집어던짐