vue-stream-mask

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

import * as VueStreamMask from "vue-stream-mask"
 
Vue.use(VueStreamMask)

HTML

<vue-stream-mask />

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:

<vue-stream-mask @loaded="handleStream" />
 
<!-- somewhere else on like on your code methods -->
 
<script>
    function handleStream(stream){
        // Do things to the stream
        // E.g. Send it to another computer using an RTCPeerConnection
        //      pc is an RTCPeerConnection created elsewhere
        this.pc.addStream(stream);
    }
</script> 
 

- On demand -

If you want to ask for the media stream at a certain moment on your app

Example:

<vue-stream-mask await ref="vueStreamRef"/>
 
<!-- somewhere else on like on your code methods -->
<script>
    async function initStream(){
        let stream = await this.$refs.vueStreamRef.init()
        // Do things to the stream
        // E.g. Send it to another computer using an RTCPeerConnection
        //      pc is an RTCPeerConnection created elsewhere
        this.pc.addStream(stream);
    }
</script> 
 

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