Adding Virtual Backgrounds

Twilio Video supports background blur and replacement on the web using the optional Video Processors JavaScript library. The Video Processors library is a collection of video processing tools that can be used with the Twilio Video JavaScript SDK to apply transformations and filters, such as background blurring and virtual backgrounds, to a VideoTrack. You can also use the tools to create your own transformations or filters.

The recent changes to the library are documented here

See a live demo with blurred backgrounds and virtual backgrounds in the browser using the Video Processors tools here.

View the Video Processors demo application and run the example application locally.

• Twilio Video JavaScript SDK (v2.15+)
• Node.js (v14+)
• NPM (v6+, comes installed with newer Node versions)

You can install the Video Processors library using Node Package Manager (npm):

npm install @twilio/video-processors --save

Using this method, you can import twilio-video-processors like so:

import * as VideoProcessors from '@twilio/video-processors';

After installing with npm, you can also copy twilio-video-processors.js from the dist/build folder and include it directly in your web app using a <script> tag:

<script src="https://my-server-path/twilio-video-processors.js"></script>

Using this method, twilio-video-processors.js will set a browser global:

const VideoProcessors = Twilio.VideoProcessors;

The following table lists the browsers and operating systems supported by the Video Processors JavaScript library.

View the full Video Processors JavaScript library documentation here.