Skip to contentSkip to navigationSkip to topbar
On this page

Adding Virtual Backgrounds


(warning)

Warning

This documentation is for reference only. We are no longer onboarding new customers to Programmable Video. Existing customers can continue to use the product until December 5, 2026(link takes you to an external page).

We recommend migrating your application to the API provided by our preferred video partner, Zoom. We've prepared this migration guide(link takes you to an external page) to assist you in minimizing any service disruption.


Virtual Background Support on the Web

virtual-background-support-on-the-web page anchor

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.

Video Processors Changelog

video-processors-changelog page anchor

The recent changes to the library are documented here(link takes you to an external page)

Video Processors Live Demo

video-processors-live-demo page anchor

See a live demo with blurred backgrounds and virtual backgrounds in the browser using the Video Processors tools here(link takes you to an external page).

Run the demo application

run-the-demo-application page anchor

View the Video Processors demo application(link takes you to an external page) and run the example application locally.

You can install the Video Processors library using Node Package Manager(link takes you to an external page) (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';

Using the <script> tag

using-the-script-tag page anchor

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.

ChromeFirefoxSafariEdge (Chromium)
Android--
iOS--
Linux--
MacOS
Windows-

View the full Video Processors JavaScript library documentation here(link takes you to an external page).

Need some help?

Terms of service

Copyright © 2024 Twilio Inc.