/react-opencv-face-detection

Real time face detection with OpenCV + React

Primary LanguageC++

Overview

This repository is an example of how OpenCV js bundles and React can be utilized for real-time face detection from a device camera.

Build / Test / Lint / Typecheck

# Install dependencies
$ pnpm install

# Run the project locally
$ pnpm dev

# Run linter
$ pnpm lint

# Run build
$ pnpm build

Folder Structure

assets/ - 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

OpenCV provides a real-time optimized Computer Vision library, tools, and hardware.

Step 1: prepare to build

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.

Step 2: build

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.

WARNING

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.26 Docker container which is the latest stable version which can build everything
  • replace build script build_js.py in repositpory by opencv-build/platforms/js/build_js.py
  • replace header file intrin_wasm.hpp in repositpory by opencv-build/modules/core/include/opencv2/core/hal/intrin_wasm.hpp

SIMD optimizations

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.

Links