# vue-stream-mask

> You can see it working live here [vue-stream-mask demo](https://sagoncalves.github.io/vue-stream-mask/ "vue-stream-mask demo")

Latest version **0.2.18** (published 2020-06-09) · 0 weekly downloads

## Install

```sh
npm install vue-stream-mask
pnpm add vue-stream-mask
yarn add vue-stream-mask
bun add vue-stream-mask
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.18 |
| Published | 2020-06-09 |
| First published | 2020-04-25 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 2.3 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Santiago Goncalves |
| Maintainers | sagoncalves |
| Keywords | vue, stream, media-stream, mask, background-blur, bokeh-effect, green-screen |

## Links

- npm: https://www.npmjs.com/package/vue-stream-mask
- npm.io page: https://npm.io/package/vue-stream-mask

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [@tensorflow/tfjs](https://npm.io/package/@tensorflow/tfjs.md) ^1.7.3
- [@tensorflow-models/body-pix](https://npm.io/package/@tensorflow-models/body-pix.md) ^2.0.5

## Alternatives

- [byte-size](https://npm.io/package/byte-size.md) — 2.1M weekly downloads
- [speed-limiter](https://npm.io/package/speed-limiter.md) — 16.0K weekly downloads
- [@powersync/node](https://npm.io/package/@powersync/node.md) — 10.9K weekly downloads
- [@ledgerhq/coin-cardano](https://npm.io/package/@ledgerhq/coin-cardano.md) — 1.0K weekly downloads
- [@jayesol/jayeson.lib.streamfinder](https://npm.io/package/@jayesol/jayeson.lib.streamfinder.md) — 1.0K weekly downloads

## Recent versions

- 0.2.18 (latest) — 2020-06-09
- 0.2.17 — 2020-06-09
- 0.2.16 — 2020-06-08
- 0.2.15 — 2020-06-08
- 0.2.14 — 2020-06-08
- 0.2.13 — 2020-06-08
- 0.2.12 — 2020-06-08
- 0.2.11 — 2020-06-08
- 0.2.10 — 2020-06-04
- 0.2.9 — 2020-06-04
- 0.2.8 — 2020-06-04
- 0.2.7 — 2020-06-03
- 0.2.6 — 2020-06-03
- 0.2.5 — 2020-06-02
- 0.2.4 — 2020-06-02
- … 13 more at https://npm.io/package/vue-stream-mask/versions

## README

## Vue Stream Mask Component
You can see it working live here [vue-stream-mask demo](https://sagoncalves.github.io/vue-stream-mask/ "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
``` bash
yarn add vue-stream-mask
```

#### Import component
``` javascript
import * as VueStreamMask from "vue-stream-mask"

Vue.use(VueStreamMask)
```

#### HTML
``` 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:
``` html
<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:
``` html
<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  |

---
_Source: https://npm.io/package/vue-stream-mask · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._