https://github.com/markbrouch/virtual-background-demo
https://github.com/markbrouch/virtual-background-demo
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/markbrouch/virtual-background-demo
- Owner: markbrouch
- Created: 2022-05-02T12:25:21.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-11T20:55:17.000Z (about 4 years ago)
- Last Synced: 2025-01-28T10:35:39.886Z (over 1 year ago)
- Language: Vue
- Size: 12.5 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# virtual-background-demo
A simple [Twilio Video](https://www.twilio.com/docs/video/overview) app showing how to build a video processor that replaces the background of a video stream.
## Try it out!
[virtual-background-demo.markbrouch.com
](https://virtual-background-demo.markbrouch.com)
## Build Setup
```bash
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn dev
# build for production and launch server
$ yarn build
$ yarn start
# generate static project
$ yarn generate
```
## How it works
The virtual background video processor pipes video frames through Google's [MediaPipe Selfie Segmentation](https://google.github.io/mediapipe/solutions/selfie_segmentation.html) model and then uses [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) to composite the virtual background layers.
Check out my upcoming talk at [JSConf Budapest](https://jsconfbp.com/speakers/mark-brouch/) to learn more about how I built this!