This repository is an example of how OpenCV js bundles and React can be utilized for real-time face detection from a device camera.
# Install dependencies
$ pnpm install
# Run the project locally
$ pnpm dev
# Run linter
$ pnpm lint
# Run build
$ pnpm buildassets/ - static files and opencv bundles + models
opencv-build/ - everything to build opencv packages
src/
⋅⋅⋅components/ - react components
⋅⋅⋅hooks/ - utility and/or app configuration hooks
⋅⋅⋅core/ - core functions
OpenCV provides a real-time optimized Computer Vision library, tools, and hardware.
Clone the repo git clone https://github.com/opencv/opencv.git
Take a look at code with OpenCV usage and find every OpenCV.js function you need. Go to opencv/platforms/js/opencv_js.config.py, and keep only these functions. Otherwise use the following config file opencv-build/platforms/js/opencv_js.config.py and replace config inside repository. This small tweak significantly reduces size of the final bundles.
Take a look at warning section before you continue.
Run the following commands to build javascript bundles:
docker run --rm -v $(pwd):/src -u $(id -u):$(id -g) emscripten/emsdk:2.0.26 emcmake python3 ./platforms/js/build_js.py build_asm --disable_wasm
docker run --rm -v $(pwd):/src -u $(id -u):$(id -g) emscripten/emsdk:2.0.26 emcmake python3 ./platforms/js/build_js.py build_wasm --build_wasm
docker run --rm -v $(pwd):/src -u $(id -u):$(id -g) emscripten/emsdk:2.0.26 emcmake python3 ./platforms/js/build_js.py build_threads --build-wasm --threads
After all that copy opencv.js, opencv_js.js & opencv_js.worker.js (if available) from each build_X/bin/ folder into their public/assets/opencv/X/ folder at the root of the project.
There are some discrepancies between OpenCV code and build tools, which are known issues. Please do the following to fix them:
- use
emscripten/emsdk:2.0.26Docker container which is the latest stable version which can build everything - replace build script
build_js.pyin repositpory byopencv-build/platforms/js/build_js.py - replace header file
intrin_wasm.hppin repositpory byopencv-build/modules/core/include/opencv2/core/hal/intrin_wasm.hpp
OpenCV.js version with SIMD optimizations doesn't work in Firefox 104 and below. Threads + SIMD version works only through HTTPS and doesn't work in Firefox 104 and below too.