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 |