https://github.com/benrosen/react-video-compositor
A React video component with virtual backgrounds, foreground effects, and bokeh background blur.
https://github.com/benrosen/react-video-compositor
Last synced: over 1 year ago
JSON representation
A React video component with virtual backgrounds, foreground effects, and bokeh background blur.
- Host: GitHub
- URL: https://github.com/benrosen/react-video-compositor
- Owner: benrosen
- Created: 2021-04-18T04:07:26.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-19T12:28:12.000Z (over 5 years ago)
- Last Synced: 2025-02-10T13:12:17.620Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 1.59 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-video-compositor
A flexible React video component for virtual backgrounds, foreground effects, and bokeh background blur.
## Resources
- Repository: https://github.com/benrosen/react-video-compositor
- Documentation: https://benrosen.github.io/react-video-compositor
- Package: https://www.npmjs.com/package/react-video-compositor
## Getting Started
### Install
```shell
npm i react-video-compositor
```
### Import
Add the following line to the top of your `index.js` file.
```javascript
import * as tfjs from "@tensorflow/tfjs";
```
### Implement
The following example shows a `BodyPixCompositor` component that has been configured to render 60 times per second.
The rendered video will have a blurred background and will be overlaid with an image from a file.
The `onCaptureStream` callback will be used to log a `MediaStream` to the console.
```javascript
import React from "react";
import { BodyPixCompositor } from "react-video-compositor";
export default function App() {
return (
{
console.log(stream);
}}
style={{
border: "1px dotted magenta",
maxHeight: "50%",
minHeight: "10%",
}}
/>
);
}
```
**TIP:** You can use the `onCaptureStream` callback to send the `MediaStream` argument to a service like the [AWS Chime SDK](https://aws.amazon.com/chime/chime-sdk/).
#### Configuring Virtual Backgrounds
The `background` prop can be used to configure virtual backgrounds for the video stream. The `background` prop accepts a variety of input types, including:
- [Bypass](#raw-video)
- [Background Blur](#background-blur)
- [CSS Color Name](#css-color-name)
- [Hex Code](#hex-code)
- [RGBA](#rgba)
- [Image Element](#image-element)
- [Video Element](#video-element)
- [Image Path](#image-path)
- [Video Path](#video-path)
##### Bypass
```javascript
import React from "react";
import { VideoCompositor } from "react-video-compositor";
export default function App() {
return ;
}
```
##### Background Blur
```javascript
import React from "react";
import { VideoCompositor } from "react-video-compositor";
export default function App() {
return ;
}
```
##### CSS Color Name
```javascript
import React from "react";
import { VideoCompositor } from "react-video-compositor";
export default function App() {
return ;
}
```
##### Hex Code
```javascript
import React from "react";
import { VideoCompositor } from "react-video-compositor";
export default function App() {
return ;
}
```
##### RGBA
```javascript
import React from "react";
import { VideoCompositor } from "react-video-compositor";
export default function App() {
return ;
}
```
##### Image Element
```javascript
import React, { Fragement, useRef } from "react";
import { VideoCompositor } from "react-video-compositor";
export default function App() {
const imageElement = useRef();
return (
![]()
);
}
```
##### Video Element
```javascript
import React, { Fragement, useRef } from "react";
import { VideoCompositor } from "react-video-compositor";
export default function App() {
const videoElement = useRef();
return (
);
}
```
##### Image Path
```javascript
import React from "react";
import { VideoCompositor } from "react-video-compositor";
export default function App() {
return ;
}
```
##### Video Path
```javascript
import React from "react";
import { VideoCompositor } from "react-video-compositor";
export default function App() {
return ;
}
```
## Bibliography
- https://dannadori.medium.com/virtual-background-with-amazon-chime-sdk-bodypix-23fb59ac8c64
- https://github.com/FLECT-DEV-TEAM/LocalVideoEffector
- https://blog.tensorflow.org/2019/11/updated-bodypix-2.html
- https://blog.logrocket.com/responsive-camera-component-react-hooks/
- https://github.com/vinooniv/video-bg-blur/blob/master/index.html
- https://github.com/vinooniv/video-bg-blur/blob/master/js/video.js
- https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video