#　無　保　証　で　す / Use this article at your own risk
当方執筆の技術情報に関するライセンス、免責事項、禁止事項

This article is licensed under Creative Commons — Attribution 4.0 International — CC BY 4.0

概要 / Summary

やっと MSYS2 上で OpenCV.js のビルドに成功したのです。すごいでしょう。

I've finally built OpenCV.js on MSYS2! YEAAAAH!

環境 / Environment

Windows10 Home 64bit
https://www.microsoft.com/ja-jp/windows/windows-10-specifications
https://www.microsoft.com/en-us/windows/windows-10-specifications
MSYS2 64bit
https://www.msys2.org/
https://packages.msys2.org/base
https://github.com/msys2/msys2/wiki
Emscripten
https://emscripten.org/docs/getting_started/downloads.html

Emscripten の設定 / Setup Emscripten

MSYS サブシステムから / on MSYS Subsystem

on_MSYS_Subsystem

# Install build dependencies of OpenCV.js
pacman -Syuu
pacman -S base-devel msys2-devel mingw-w64-x86_64-toolchain mingw-w64-x86_64-cmake mingw-w64-x86_64-python2 mingw-w64-x86_64-python3 git

# install nano and nano syntax highlighting if needed
pacman -S nano nano-syntax-highlighting-git
cat /usr/share/nano-syntax-highlighting/nanorc.sample | xargs -0 echo >> ~/.nanorc

構築依存に git を書き忘れていました。ごめんね。
Sorry I've forgot the package "git". You need to install git on your MSYS2.

気をつけて / CAUTION

ccache が入っていると OpenCV.js のビルドプロセスがコケます。

Do NOT install any "ccache" packages, or You'll fail your building process of OpenCV.js.

on_MSYS_Subsystem

# remove ccache
pacman -R ccache
pacman -R mingw-w64-i686-ccache
pacman -R mingw-w64-x86_64-ccache

MinGW64 サブシステムから / on MinGW64 Subsystem

作業ディレクトリを作成する / Making working directory

on_MinGW64_Subsystem

cd
mkdir -p Downloads/Emscripten
cd Downloads/Emscripten

# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git

# Enter that directory
cd emsdk

# Fetch the latest version of the emsdk (not needed the first time you clone)
git pull

出典 / quoted from

Download and install — Emscripten 1.38.47 documentation
https://emscripten.org/docs/getting_started/downloads.html

PowerShell から / on PowerShell

新規に PowerShell を開き、以下のコマンドを実行します。

Open new PowerShell window, and run below commands.

on_PowerShell

cd C:\msys64\home\$env:USERNAME\Downloads\Emscripten\emsdk
.\emsdk.ps1 install latest
exit

セキュリティ警告が出る場合は Execution Policy を適宜変更して下さい。
If you've got a security warning, you may need to change the execution policy of PowerShell.

関連文献 / related documents

Set-ExecutionPolicy - Microsoft Docs - google 翻訳
https://translate.google.co.jp/translate?sl=en&tl=ja&u=https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fpowershell%2Fmodule%2Fmicrosoft.powershell.security%2Fset-executionpolicy%3Fview%3Dpowershell-6

Set-ExecutionPolicy - Microsoft Docs
https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.security/set-executionpolicy?view=powershell-6

MinGW64 サブシステムから / on MinGW64 Subsystem

Mintty（MinGW64 サブシステム）に戻り、以下のコマンドを実行します。

Return on Mintty (MinGW64 Subsystem), and run below commands.

on_MinGW64_Subsystem

# Make the "latest" SDK "active" for the current user. (writes ~/.emscripten file)
./emsdk activate latest

出典 / quoted from

Download and install — Emscripten 1.38.47 documentation
https://emscripten.org/docs/getting_started/downloads.html

OpenCV.js のビルド / Building OpenCV.js on MinGW64 Subsystem of MSYS2

次は OpenCV.js のビルドです。

Now, It's the time to build OpenCV.js, Yeaaah!

OpenCV（4.1.2）のソースのダウンロード / Downloading the source code archive of OpenCV (4.1.2)

on_MinGW64_Subsystem

# Make working directory
mkdir -p $HOME/Downloads/OpenCV
cd $HOME/Downloads/OpenCV
OPENCV_VERSION=4.1.2
curl -LO https://github.com/opencv/opencv/archive/$OPENCV_VERSION.tar.gz
tar zxf $OPENCV_VERSION.tar.gz
cd opencv-$OPENCV_VERSION
unset OPENCV_VERSION

platforms/js/build_js.py の書き換え / Rewriting platforms/js/build_js.py

cmake のオプションの記述領域に "-GMSYS Makefiles", の行を書き加え、あわせて make を mingw32-make に書き換えます。

Add the line "-GMSYS Makefiles", to the definition area of cmake options and replace the item make to mingw32-make

on_MinGW64_Subsystem

nano platforms/js/build_js.py

notepad platforms/js/build_js.py 等とすることで、nano に代えてメモ帳で build_js.py を開くことが出来ます。
You can rewrite build_js.py by using notepad instead of nano. Like this, notepad platforms/js/build_js.py

参考文献 / references

MSYS Makefiles — CMake 3.16.0-rc2 Documentation
https://cmake.org/cmake/help/latest/generator/MSYS%20Makefiles.html

c - How to compile makefile using MinGW? - Stack Overflow
https://stackoverflow.com/questions/11772602/how-to-compile-makefile-using-mingw

FAQ | MinGW
http://www.mingw.org/wiki/FAQ

cmake \--help

$ cmake --help
Usage

  cmake [options] <path-to-source>
  cmake [options] <path-to-existing-build>
  cmake [options] -S <path-to-source> -B <path-to-build>

Specify a source directory to (re-)generate a build system for it in the
current working directory.  Specify an existing build directory to
re-generate its build system.

Options
  -S <path-to-source>          = Explicitly specify a source directory.
  -B <path-to-build>           = Explicitly specify a build directory.
  -C <initial-cache>           = Pre-load a script to populate the cache.
  -D <var>[:<type>]=<value>    = Create or update a cmake cache entry.
  -U <globbing_expr>           = Remove matching entries from CMake cache.
  -G <generator-name>          = Specify a build system generator.
  -T <toolset-name>            = Specify toolset name if supported by
                                 generator.
  -A <platform-name>           = Specify platform name if supported by
                                 generator.
  -Wdev                        = Enable developer warnings.
  -Wno-dev                     = Suppress developer warnings.
  -Werror=dev                  = Make developer warnings errors.
  -Wno-error=dev               = Make developer warnings not errors.
  -Wdeprecated                 = Enable deprecation warnings.
  -Wno-deprecated              = Suppress deprecation warnings.
  -Werror=deprecated           = Make deprecated macro and function warnings
                                 errors.
  -Wno-error=deprecated        = Make deprecated macro and function warnings
                                 not errors.
  -E                           = CMake command mode.
  -L[A][H]                     = List non-advanced cached variables.
  --build <dir>                = Build a CMake-generated project binary tree.
  --install <dir>              = Install a CMake-generated project binary
                                 tree.
  --open <dir>                 = Open generated project in the associated
                                 application.
  -N                           = View mode only.
  -P <file>                    = Process script mode.
  --find-package               = Run in pkg-config like mode.
  --graphviz=[file]            = Generate graphviz of dependencies, see
                                 CMakeGraphVizOptions.cmake for more.
  --system-information [file]  = Dump information about this system.
  --loglevel=<ERROR|WARNING|NOTICE|STATUS|VERBOSE|DEBUG|TRACE>
                               = Set the verbosity of messages from CMake
                                 files.
  --debug-trycompile           = Do not delete the try_compile build tree.
                                 Only useful on one try_compile at a time.
  --debug-output               = Put cmake in a debug mode.
  --trace                      = Put cmake in trace mode.
  --trace-expand               = Put cmake in trace mode with variable
                                 expansion.
  --trace-source=<file>        = Trace only this CMake file/module.  Multiple
                                 options allowed.
  --warn-uninitialized         = Warn about uninitialized values.
  --warn-unused-vars           = Warn about unused variables.
  --no-warn-unused-cli         = Don't warn about command line options.
  --check-system-vars          = Find problems with variable usage in system
                                 files.
  --help,-help,-usage,-h,-H,/? = Print usage information and exit.
  --version,-version,/V [<f>]  = Print version number and exit.
  --help-full [<f>]            = Print all help manuals and exit.
  --help-manual <man> [<f>]    = Print one help manual and exit.
  --help-manual-list [<f>]     = List help manuals available and exit.
  --help-command <cmd> [<f>]   = Print help for one command and exit.
  --help-command-list [<f>]    = List commands with help available and exit.
  --help-commands [<f>]        = Print cmake-commands manual and exit.
  --help-module <mod> [<f>]    = Print help for one module and exit.
  --help-module-list [<f>]     = List modules with help available and exit.
  --help-modules [<f>]         = Print cmake-modules manual and exit.
  --help-policy <cmp> [<f>]    = Print help for one policy and exit.
  --help-policy-list [<f>]     = List policies with help available and exit.
  --help-policies [<f>]        = Print cmake-policies manual and exit.
  --help-property <prop> [<f>] = Print help for one property and exit.
  --help-property-list [<f>]   = List properties with help available and
                                 exit.
  --help-properties [<f>]      = Print cmake-properties manual and exit.
  --help-variable var [<f>]    = Print help for one variable and exit.
  --help-variable-list [<f>]   = List variables with help available and exit.
  --help-variables [<f>]       = Print cmake-variables manual and exit.

Generators

The following generators are available on this platform (* marks default):
* Visual Studio 16 2019        = Generates Visual Studio 2019 project files.
                                 Use -A option to specify architecture.
  Visual Studio 15 2017 [arch] = Generates Visual Studio 2017 project files.
                                 Optional [arch] can be "Win64" or "ARM".
  Visual Studio 14 2015 [arch] = Generates Visual Studio 2015 project files.
                                 Optional [arch] can be "Win64" or "ARM".
  Visual Studio 12 2013 [arch] = Generates Visual Studio 2013 project files.
                                 Optional [arch] can be "Win64" or "ARM".
  Visual Studio 11 2012 [arch] = Generates Visual Studio 2012 project files.
                                 Optional [arch] can be "Win64" or "ARM".
  Visual Studio 10 2010 [arch] = Generates Visual Studio 2010 project files.
                                 Optional [arch] can be "Win64" or "IA64".
  Visual Studio 9 2008 [arch]  = Generates Visual Studio 2008 project files.
                                 Optional [arch] can be "Win64" or "IA64".
  Borland Makefiles            = Generates Borland makefiles.
  NMake Makefiles              = Generates NMake makefiles.
  NMake Makefiles JOM          = Generates JOM makefiles.
  MSYS Makefiles               = Generates MSYS makefiles.
  MinGW Makefiles              = Generates a make file for use with
                                 mingw32-make.
  Unix Makefiles               = Generates standard UNIX makefiles.
  Green Hills MULTI            = Generates Green Hills MULTI files
                                 (experimental, work-in-progress).
  Ninja                        = Generates build.ninja files.
  Watcom WMake                 = Generates Watcom WMake makefiles.
  CodeBlocks - MinGW Makefiles = Generates CodeBlocks project files.
  CodeBlocks - NMake Makefiles = Generates CodeBlocks project files.
  CodeBlocks - NMake Makefiles JOM
                               = Generates CodeBlocks project files.
  CodeBlocks - Ninja           = Generates CodeBlocks project files.
  CodeBlocks - Unix Makefiles  = Generates CodeBlocks project files.
  CodeLite - MinGW Makefiles   = Generates CodeLite project files.
  CodeLite - NMake Makefiles   = Generates CodeLite project files.
  CodeLite - Ninja             = Generates CodeLite project files.
  CodeLite - Unix Makefiles    = Generates CodeLite project files.
  Sublime Text 2 - MinGW Makefiles
                               = Generates Sublime Text 2 project files.
  Sublime Text 2 - NMake Makefiles
                               = Generates Sublime Text 2 project files.
  Sublime Text 2 - Ninja       = Generates Sublime Text 2 project files.
  Sublime Text 2 - Unix Makefiles
                               = Generates Sublime Text 2 project files.
  Kate - MinGW Makefiles       = Generates Kate project files.
  Kate - NMake Makefiles       = Generates Kate project files.
  Kate - Ninja                 = Generates Kate project files.
  Kate - Unix Makefiles        = Generates Kate project files.
  Eclipse CDT4 - NMake Makefiles
                               = Generates Eclipse CDT 4.0 project files.
  Eclipse CDT4 - MinGW Makefiles
                               = Generates Eclipse CDT 4.0 project files.
  Eclipse CDT4 - Ninja         = Generates Eclipse CDT 4.0 project files.
  Eclipse CDT4 - Unix Makefiles= Generates Eclipse CDT 4.0 project files.

環境変数の設定 / Setting environmental variables

on_MinGW64_Subsystem

# set variables for Emscripten
source $HOME/Downloads/Emscripten/emsdk/emsdk_env.sh

# set variable "EMSCRIPTEN"
export $(grep EMSCRIPTEN_ROOT $EM_CONFIG | sed -e s/EMSCRIPTEN_ROOT/EMSCRIPTEN/ -e s/\ //g -e s/\'//g)

出典 / quoted from

Download and install — Emscripten 1.38.47 documentation
https://emscripten.org/docs/getting_started/downloads.html

関連文献 / related documents

Sed - An Introduction and Tutorial
https://www.grymoire.com/Unix/Sed.html

sed コマンド | コマンドの使い方(Linux) | hydroculのメモ
https://hydrocul.github.io/wiki/commands/sed.html

OpenCV.js の構築 / Building OpenCV.js

on_MinGW64_Subsystem

python2.7 platforms/js/build_js.py build_js --build_test

参考文献 / references

OpenCV: Build OpenCV.js
https://docs.opencv.org/master/d4/da1/tutorial_js_setup.html

Error building openCV.js - OpenCV Q&A Forum
https://answers.opencv.org/question/192715/error-building-opencvjs/

msys2でopenCVが使えない - プログラマ専用SNS ミクプラ
https://dixq.net/forum/viewtopic.php?t=20501

OpenCV.js のテスト / Testing OpenCV.js

HTTPサーバを立ち上げます。

Launch a HTTP server.

on_MinGW64_Subsystem

cd build_js/bin
python3 -m http.server 8080

立ち上げ後、ウェブブラウザで http://localhost:8080/tests.html を開きます。

Then, open http://localhost:8080/tests.html from a web-browser.

上手に焼けました。

Well done!!

参考文献 / references

pythonでローカルwebサーバを立ち上げる - Qiita
https://qiita.com/okhrn/items/4d3c74563154f191ba16

http.server --- HTTP サーバ — Python 3.7.5 ドキュメント
https://docs.python.org/ja/3.7/library/http.server.html

http.server — HTTP servers — Python 3.7.5 documentation
https://docs.python.org/3.7/library/http.server.html