Virtual background demo with the help of MediaPipe

Live demo: https://kexizeroing.github.io/background-demo

About MediaPipe
MediaPipe can create custom cross-platform ML solutions for common tasks without ML expertise.

• Create a custom object detection web app with MediaPipe: https://codelabs.developers.google.com/mp-object-detection-web
• MediaPipe Studio: https://mediapipe-studio.webapps.google.com
• Easy on-device Machine Learning with MediaPipe: https://www.youtube.com/watch?v=yOP_FY2KTm8

Basic process:
getUserMedia -> video -> selfieSegmentation -> draw canvas -> apply filter -> captureStream -> video

Project details:

1. The project was bootstrapped with Create React App.
2. For deployment, refer to Github Pages.
3. Experiment with MediaPipe Selfie Segmentation using npm pacakge @mediapipe/selfie_segmentation

If the deploy complains error A branch named 'gh-pages' already exists, just deleting the folder node_modules/.cache/gh-pages works.