# opentok-camera-filters-new
> Streaming from a Canvas with Filters to an OpenTok Session
Latest version **2.0.3** (published 2019-09-09) · MIT license · 0 weekly downloads
## Install
```sh
npm install opentok-camera-filters-new
pnpm add opentok-camera-filters-new
yarn add opentok-camera-filters-new
bun add opentok-camera-filters-new
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; large bundle.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.0.3 |
| Published | 2019-09-09 |
| First published | 2019-09-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 13 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Parth Gupta |
| Maintainers | parth131197 |
| Keywords | canvas, opentok, filters |
## Links
- npm: https://www.npmjs.com/package/opentok-camera-filters-new
- Repository: https://github.com/parth131197/opentok-camera-filters
- Homepage: https://github.com/parth131197/opentok-camera-filters#readme
- Issues: https://github.com/parth131197/opentok-camera-filters/issues
- npm.io page: https://npm.io/package/opentok-camera-filters-new
## Dependencies (2)
- [tracking](https://npm.io/package/tracking.md) ^1.1.2
- [clmtrackr](https://npm.io/package/clmtrackr.md) ~1.0.1
## Alternatives
- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads
## Recent versions
- 2.0.3 (latest) — 2019-09-09
- 2.0.2 — 2019-09-06
- 2.0.1 — 2019-09-06
## README
[](https://travis-ci.org/aullman/opentok-camera-filters)
# opentok-camera-filters
Library which lets you add visual filters to your OpenTok Publisher.
# [Demo](https://aullman.github.io/opentok-camera-filters/)
# [Blog Post](http://www.tokbox.com/blog/camera-filters-in-opentok-for-web/)
# Browser Support
* Chrome 51+
* Firefox 49+
* Safari 11+
These filters require the Canvas [captureStream API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream) which works in Chrome 51+, Firefox 43+ and Safari 11+ (and Safari on iOS 11). Adding audio to the stream only started working in Firefox 49+.
# Usage
You can view the [source code for the demo](https://github.com/aullman/opentok-camera-filters/blob/gh-pages/src/demo.js) for an example of how to use this library.
```javascript
const filters = require('opentok-camera-filters/src/filters.js');
const filterFn = require('opentok-camera-filters');
```
If you are not using a bundler then you can use the pre-bundled files in the dist folder.
```html
```
Then you get your media stream you want to filter and pass it to the filter function eg.
```javascript
const publish = OT.getUserMedia().then((mediaStream) => {
// Initialise with filter none
filter = filterFn(mediaStream, filters.none);
const publisherOptions = {
// Pass in the canvas stream video track as our custom videoSource
videoSource: filter.canvas.captureStream(30).getVideoTracks()[0],
// Pass in the audio track from our underlying mediaStream as the audioSource
audioSource: mediaStream.getAudioTracks()[0],
};
const publisher = OT.initPublisher('publisher', publisherOptions, handleError);
filter.setPublisher(publisher);
return publisher;
});
```
Then when we have successfully connected we publish the publisher to the Session.
```javascript
session.connect(TOKEN, err => {
if (err) handleError(err);
publish.then(publisher => {
session.publish(publisher, handleError);
});
});
```
If you want to change the filter you can use the change method, eg.
```javascript
filter.change(filters.red);
```
# Available Filters
A lot of the filters were taken from [tracking.js](https://trackingjs.com).
## red
Give the video a red tint
## green
Give the video a green tint
## blue
Give the video a blue tint
## invert
Inverts the colour in every pixel of the video.
## grayscale
Converts a colour from a colorspace based on an RGB color model to a grayscale representation of its luminance.
## sepia
Applies a sepia tone to the image.
## blur
A Gaussian blur (also known as Gaussian smoothing) is the result of blurring an image by a Gaussian function.
## sketch
Computes the vertical and horizontal gradients of the image and combines the computed images to find edges in the image.
## face
Does face detection using [clmtrackr](https://github.com/auduno/clmtrackr) and draws an image on top of the face.
# Custom Filters
If you want to create your own custom filter you just need to create a function that looks like one of the functions in the [filters.js](src/filters.js) file. These functions accept a videoElement and a canvas parameter and they take the data out of the videoElement which is rendering the unfiltered video from the camera and they draw it onto the canvas after applying a filter. It should return an object with a stop method which when called will stop the filter from processing. For example creating a simple filter which draws a new random colour every second would look something like:
```javascript
const randomColour = () => {
return Math.round(Math.random() * 255);
};
filter.change((videoElement, canvas) => {
const interval = setInterval(() => {
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = `rgb(${randomColour()}, ${randomColour()}, ${randomColour()})`;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}, 1000);
return {
stop: () => {
clearInterval(interval);
}
};
});
```
You can also use the [filterTask](src/filterTask.js) which handles transforming image data from the videoElement and just lets you pass it a filter function which takes ImageData and transforms it returning new ImageData. The [invert function](https://github.com/aullman/opentok-camera-filters/blob/a845d2f4eec8a8a6bea86c3a785ef089656d861f/src/filters.js#L92) is a good example of a simple filter which uses this.
If you want access to the face tracking data from [clmtrackr](https://github.com/auduno/clmtrackr) you can use the `face()` filter and pass in your own renderer function like so:
```javascript
filter.change((videoElement, canvas) => {
return filters.face(videoElement, canvas, positions => {
// Do something with the positions and draw something on the canvas
});
});
```
The positions are the response from `clmtrackr.getCurrentPosition()`. The [glasses filter](https://github.com/aullman/opentok-camera-filters/blob/master/src/filters.js#L115) is an example of a face filter.
---
_Source: https://npm.io/package/opentok-camera-filters-new · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._