Vue Stream Mask Component
You can see it working live here vue-stream-mask demo
Features
- Person & multi-person body segmentation blurring video background
- Green screen mask, you can use the background you wish with a simple property
Add to your project
yarn add vue-stream-mask
Import component
Vue
HTML
Ways of use
- Default -
By default when the component loads it ask for the camera media and later emits the loaded event wich serves as a parameter the stream that you can add to a RTCPeerConnection, If you want to avoid this behaviour check the on demand way of use.
Example:
<!-- somewhere else on like on your code methods -->
- On demand -
If you want to ask for the media stream at a certain moment on your app
Example:
<!-- somewhere else on like on your code methods -->
Methods
function | Description |
---|---|
async init() |
Triggering this function will start video capture and return a media stream object |
stop() |
Triggering this function will stop video capture |
Props
Property name | Description |
---|---|
await |
Component wont ask for media stream until you run the init() func |
show |
Displays a canvas element with the local stream |
multiple |
Enables multiple person segmentation |
background |
If enabled it replaces persons background with given img url |
backgroundBlurAmount |
if background prop its not defined you can handle with this one how much blur you want in the background |