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

Props