https://github.com/livekit/track-processors-js
Pre-built track processors for background images, blur, etc for use with the LiveKit JS Client SDK
https://github.com/livekit/track-processors-js
Last synced: 11 months ago
JSON representation
Pre-built track processors for background images, blur, etc for use with the LiveKit JS Client SDK
- Host: GitHub
- URL: https://github.com/livekit/track-processors-js
- Owner: livekit
- License: apache-2.0
- Created: 2022-03-07T15:19:57.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-07-21T18:02:19.000Z (11 months ago)
- Last Synced: 2025-07-21T20:19:25.703Z (11 months ago)
- Language: TypeScript
- Homepage: https://livekit.io
- Size: 1.68 MB
- Stars: 56
- Watchers: 17
- Forks: 21
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# LiveKit track processors
## Install
```
npm add @livekit/track-processors
```
## Usage of prebuilt processors
### Available processors
This package exposes the `BackgroundBlur` and `VirtualBackground` pre-prepared processor pipelines.
- `BackgroundBlur(blurRadius)`
- `VirtualBackground(imagePath)`
### Usage example
```ts
import { BackgroundBlur, supportsBackgroundProcessors, supportsModernBackgroundProcessors } from '@livekit/track-processors';
if(!supportsBackgroundProcessors()) {
throw new Error("this browser does not support background processors")
}
if(supportsModernBackgroundProcessors()) {
console.log("this browser supports modern APIs that are more performant");
}
const videoTrack = await createLocalVideoTrack();
const blur = BackgroundBlur(10);
await videoTrack.setProcessor(blur);
room.localParticipant.publishTrack(videoTrack);
async function disableBackgroundBlur() {
await videoTrack.stopProcessor();
}
async updateBlurRadius(radius) {
return blur.updateTransformerOptions({blurRadius: radius})
}
```
## Developing your own processors
A track processor is instantiated with a Transformer.
```ts
// src/index.ts
export const VirtualBackground = (imagePath: string) => {
const pipeline = new ProcessorWrapper(new BackgroundTransformer({ imagePath }));
return pipeline;
};
```
### Available base transformers
- BackgroundTransformer (can blur background or use a virtual background);
## Running the sample app
This repository includes a small example app built on [Vite](https://vitejs.dev/). Run it with:
```
# install pnpm: https://pnpm.io/installation
pnpm install
pnpm sample
```