Original Camera | Background Blur | Background Image |
| | |
Platform | Operating System | Browser Version | FPS | Recommended Configuration | Remarks |
Web | Windows | Chrome 90+Firefox 90+Edge 97+ | 30 | Memory: 16GBCPU: i5-10500GPU: Dedicated 2GB | It is recommended to use the latest version of Chrome browser (Enable hardware acceleration in the browser) |
| | | | 15 | Memory: 8GBCPU: i3-8300GPU: Integrated Intel 1GB |
| | Mac | Chrome 98+Firefox 96+Safari 14+ | 30 | 2019 MacBookMemory: 16GB (2667MHz)CPU: i7 (6-core 2.60GHz)GPU: AMD Radeon 5300M |
| Android | ChromeFirefox Browser | 30 | High-end devices (e.g., Qualcomm Snapdragon 8 Gen1) | It is recommended to use Chrome, or Firefox browsers and other mainstream browsers |
| | | | 20 | Mid-range devices (e.g., MediaTek Dimensity 8000-MAX) |
| | | | 10 | Low-end devices (e.g., Qualcomm Snapdragon 660) |
| iOS | ChromeSafariFirefox | 30 | iPhone 13 | - Requires iOS 14.4 or above- It is recommended to use Chrome or Safari browsers |
| | | | 20 | iPhone XR |
import { VirtualBackground } from 'trtc-sdk-v5/plugins/video-effect/virtual-background';let trtc = TRTC.create({ plugins: [VirtualBackground] });
await trtc.startLocalVideo();
await trtc.startPlugin('VirtualBackground', {sdkAppId: 123123,userId: 'userId_123',userSig: 'your_userSig'});
// Changing to an image backgroundawait trtc.updatePlugin('VirtualBackground', {type: 'image',src: 'https://picsum.photos/seed/picsum/200/300'});
await trtc.stopPlugin('VirtualBackground');
Name | Type | Attributes | Description |
sdkAppId | number | Required | Current application ID |
userId | string | Required | Current user ID |
userSig | string | Required | UserSig corresponding to the user ID |
type | string | Optional | image for image backgroundblur for background blur (default) |
src | string | Required if type is image | Image URL, such as https://picsum.photos/seed/picsum/200/300 |
onError | (error) => {} | Optional | Callback for errors that occur during runtime error.code=10000003 indicates high rendering latency error.code=10000006 indicates insufficient browser feature support, which may lead to lagging. Recommended solutions can be found in the Common Issues section at the end of the document. |
await trtc.startPlugin('VirtualBackground', {sdkAppId: 123123,userId: 'userId_123',userSig: 'your_userSig',type: 'image',src: 'https://picsum.photos/seed/picsum/200/300'});
Name | Type | Attributes | Description |
type | string | Required | image for image background blur for background blur |
src | string | Required if type is image | Image URL, such as https://picsum.photos/seed/picsum/200/300 |
await trtc.updatePlugin('VirtualBackground', {type: 'blur'});
chrome://settings/system
into your browser's address bar and enable hardware acceleration mode.async function onError(error) {const { code } = error;if (code === 10000003 || code === 10000006) {// Reduce resolution and frame rateawait trtc.updateLocalVideo({option: {profile: '480p_2'},});// await trtc.stopPlugin('VirtualBackground'); // Or disable the plugin}}await trtc.startPlugin('VirtualBackground', {...// Other parametersonError,});
./src/assets/
, and specify this address when creating a TRTC instance:const trtc = TRTC.create({ plugins: [VirtualBackground], assetsPath: './src/assets/' });
Was this page helpful?