Security News
PyPI Introduces Digital Attestations to Strengthen Python Package Security
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
agora-extension-virtual-background
Advanced tools
Virtual Background enables users to blur their background or replace it with a solid color or an image. This feature is applicable to scenarios such as online conferences, online classes, and live streaming. It helps protect personal privacy and reduces a
Virtual Background enables users to blur their background or replace it with a solid color or an image. This feature is applicable to scenarios such as online conferences, online classes, and live streaming. It helps protect personal privacy and reduces audience distraction.
Virtual Background has the following features:
Take the following steps to set up your project:
Refer to the appropriate Quickstart Guide to integrate the Web SDK (v4.10.0 or later) and implement the basic real-time communication functions in your project.
Integrate the virtual background extension into your project via npm:
To install the virtual background extension, run the following command :
npm install agora-extension-virtual-background
To import the virtual background extension, use any of the following methods:
Method one: Add the following code to the JavaScript file:
import VirtualBackgroundExtension from "agora-extension-virtual-background";
Method two: Use the Script tag in the HTML file. Once imported, the VirtualBackgroundExtension object can be used directly in JavaScript files.
<script src="./agora-extension-virtual-background.js"></script>
Integrate the virtual background extension, and implement the virtual background feature, as follows:
Register the virtual background extension: After calling AgoraRTC.createClientto create a client object, new a VirtualBackgroundExtension object and pass in the VirtualBackgroundExtension object when calling AgoraRTC.registerExtensions.
// Create a client object
var client = AgoraRTC.createClient({mode: "rtc", codec: "vp9"});
// Create a VirtualBackgroundExtension instance
const extension = new VirtualBackgroundExtension();
// Check browser compatibility virtual background extension
if (!extension.checkCompatibility()) {
console.error("Does not support Virtual Background!");
// Handle exit code
}
// Register the extension
AgoraRTC.registerExtensions([extension]);
Initialize the virtual background extension:
i. Call extension.createProcessor to create a VirtualBackgroundProcessor instance.
processor = extension.createProcessor();
ii. Call processor.init to initialize the extension. If resource loading or extension initialization fails, this method throws an exception. Catch this exception, and handle it accordingly.
await processor.init();
iii. After creating a local camera track, call videoTrack.pipe and videoTrack.processorDestination to inject the extension into the SDK's media processing pipeline.
localVideoTrack.pipe(processor).pipe(localVideoTrack.processorDestination);
Call processor.setOptions to choose the virtual background type and make settings. Agora supports the following settings:
processor.setOptions({type: 'color', color: '#00ff00'});
processor.setOptions({type: 'img', source: HTMLImageElement});
processor.setOptions({type: 'blur', blurDegree: 2});
processor.setOptions({type: 'video', source: HTMLVideoElement});
Call processor.enable to enable the virtual background feature.
await processor.enable();
If you do not call setOptions before calling this method, the default behavior of the SDK is to blur users' actual background with the blurring degree set as 1. After enabling the virtual background feature, to switch the virtual background type, just call setOptions.
Call processor.disable() to temporarily disable the virtual background when needed.
await processor.disable()
When the virtual background is no longer used, call videoTrack.unpipe to remove the extension from the current video track.
localTracks.videoTrack.unpipe()();
If you need to open the virtual background again, reuse the existing VirtualBackgroundProcessor instance instead of recreating it. If multiple instances are created, it is recommended to call the processor.release method to release the extension resources that are no longer needed.
To test your implementation:
import AgoraRTC from "agora-rtc-sdk-ng";
import VirtualBackgroundExtension from "agora-extension-virtual-background";
// Create a client object
var client = AgoraRTC.createClient({mode: "rtc", codec: "vp9"});
// Create a VirtualBackgroundExtension instance
const extension = new VirtualBackgroundExtension();
// Register the extension
AgoraRTC.registerExtensions([extension]);
let processor = null;
var localTracks = {
videoTrack: null,
audioTrack: null
};
// Initialization
async function getProcessorInstance() {
if (!processor && localTracks.videoTrack) {
// Create a VirtualBackgroundProcessor instance
processor = extension.createProcessor();
try {
// Initialize the extension and pass in the URL of the Wasm file
await processor.init("./assets/wasms");
} catch(e) {
console.log("Fail to load WASM resource!");return null;
}
// Inject the extension into the video processing pipeline in the SDK
localTracks.videoTrack.pipe(processor).pipe(localTracks.videoTrack.processorDestination);
}
return processor;
}
// Join a channel
async function join() {
// Add event listeners
client.on("user-published", handleUserPublished);
client.on("user-unpublished", handleUserUnpublished);
[options.uid, localTracks.audioTrack, localTracks.videoTrack] = await Promise.all([
// Join a channel
client.join(options.appid, options.channel, options.token || null),
// Create a local microphone track and camera track
localTracks.audioTrack || AgoraRTC.createMicrophoneAudioTrack(),
localTracks.videoTrack || AgoraRTC.createCameraVideoTrack({encoderConfig: '720p_4'})
]);
// Play local tracks
localTracks.videoTrack.play("local-player");
}
// Set a solid color as the background
async function setBackgroundColor() {
if (localTracks.videoTrack) {
document.getElementById("loading").style.display = "block";
let processor = await getProcessorInstance();
try {
processor.setOptions({type: 'color', color: '#00ff00'});
await processor.enable();
} finally {
document.getElementById("loading").style.display = "none";
}
virtualBackgroundEnabled = true;
}
}
// Blur the user's actual background
async function setBackgroundBlurring() {
if (localTracks.videoTrack) {
document.getElementById("loading").style.display = "block";
let processor = await getProcessorInstance();
try {
processor.setOptions({type: 'blur', blurDegree: 2});
await processor.enable();
} finally {
document.getElementById("loading").style.display = "none";
}
virtualBackgroundEnabled = true;
}
}
// Set an image as the background
async function setBackgroundImage() {
const imgElement = document.createElement('img');
imgElement.onload = async() => {
document.getElementById("loading").style.display = "block";
let processor = await getProcessorInstance();
try {
processor.setOptions({type: 'img', source: imgElement});
await processor.enable();
} finally {
document.getElementById("loading").style.display = "none";
}
virtualBackgroundEnabled = true;
}
imgElement.src = '/images/background.png';
}
<video>
HTML elements. Agora also recommends meeting the following requirements:
FAQs
Virtual Background enables users to blur their background or replace it with a solid color or an image. This feature is applicable to scenarios such as online conferences, online classes, and live streaming. It helps protect personal privacy and reduces a
The npm package agora-extension-virtual-background receives a total of 9,354 weekly downloads. As such, agora-extension-virtual-background popularity was classified as popular.
We found that agora-extension-virtual-background demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.