Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/onfranciis/streamforge

Transparent background webcam stream using tensorflow and bodypix on ReactJS
https://github.com/onfranciis/streamforge

bodypix react stream tensorflow tensorflowjs typescript

Last synced: 18 days ago
JSON representation

Transparent background webcam stream using tensorflow and bodypix on ReactJS

Awesome Lists containing this project

README

        



# Streamforge


This repository holds a demo code of how to segment a webcam stream and make the background transparent using Tensorflow and Bodypix model.

You can ;

- Switch between multiple webcams
- Change background color
- Add your own background image


This is built using

- Tensorflow
- BodyPix
- ReactJs
- SCSS (A CSS Preprocessor)
- TypeScript

### Resources

- Netlify (Hosting)
- VS Code Insiders (IDE)


### Install Locally

To install this project locally

- Navigate to your working directory in your terminal and run `git clone https://github.com/onfranciis/streamforge`
- Navigate to **streamforge** and run

```
npm run dev
or
yarn dev
```

- Open [http://localhost:5173](http://localhost:5173) on your browser to see the project. You can also see this project live at [https://streamforge.onfranciis.dev](https://streamforge.onfranciis.dev).

:exclamation:PORT 5173 might not be available for you, so check your terminal output to confirm the exposed port.


If you like this repository, kindly give it a star 🌟

For enquiries, support or more, contact [[email protected]](mailto:[email protected])

![TensorFlow](https://img.shields.io/badge/TensorFlow-%23FF6F00.svg?style=for-the-badge&logo=TensorFlow&logoColor=white) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) ![SASS](https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge&logo=SASS&logoColor=white) ![VS Code Insiders](https://img.shields.io/badge/VS%20Code%20Insiders-35b393.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white) ![Linux](https://img.shields.io/badge/Linux-FCC624?style=for-the-badge&logo=linux&logoColor=black) ![Netlify](https://img.shields.io/badge/netlify-%23000000.svg?style=for-the-badge&logo=netlify&logoColor=#00C7B7)