Skip to content

Vue component that ask for user media stream and blurs or mask persons backgrounds with artificial intelligence using tensorflowjs and the body-pix api

Notifications You must be signed in to change notification settings

sagoncalves/vue-stream-mask

Repository files navigation

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