Vectorly AI Filters Library
===============================

Vectorly's AI Filters library enhances video experience in real-time in the browser. Sign up on [AI Filters Dashboard](https://ai-filters.vectorly.io/#/signup) to start using the library.

Detailed library reference documentation is at [cdn.vectorly.io/ai-filters/docs/latest](https://cdn.vectorly.io/ai-filters/docs/latest/)

## CDN

The easiest way to load Vectorly's AI Filters library directly via CDN

<pre class="language-js">
https://cdn.vectorly.io/ai-filters/v1/latest/vectorly.filters.js
</pre>

To load a specific filter, load `vectorly.<FilterName>.js` file

**BackgroundFilter**

<pre class="language-js">
https://cdn.vectorly.io/ai-filters/v1/latest/vectorly.BackgroundFilter.js
</pre>


## NPM package

You can also load Vectorly's AI Filters library through NPM. See the following [github repo](https://github.com/Vectorly/ai-filters-examples/tree/master/background) for a working demo.


**Installation**
Using yarn
<pre class="language-js">
<code>yarn add @vectorly-io/ai-filters</code>
</pre>

Using npm

<pre class="language-js">
<code>npm install --save @vectorly-io/ai-filters</code>
</pre>


**Usage**

You can import all filters using
<pre class="language-js">
<code>import vectorly from '@vectorly-io/ai-filters';
// Use background filter as vectorly.BackgroundFilter
</code></pre>

You can also import as
<pre class="language-js">
<code>import { BackgroundFilter } from '@vectorly-io/ai-filters';
</code></pre>

If using webpack v5, you can also use
<pre class="language-js">
<code>import BackgroundFilter from '@vectorly-io/ai-filters/background';
</code></pre>