Enable Beauty and Effects
Function Description
This document primarily describes how to use the beauty plugin.
Prerequisites
To use the Virtual Background Feature with SDKAppID, please make sure you have subscribed to the RTC-Engine Professional Edition Monthly Package. For related instructions on the Monthly Package, please refer to the Billing overview in the RTC-Engine documentation.
TRTC Web SDK version must be ≥ 5.5.0.
The requirements for different systems and configurations on the Web platform are as shown in the table below:
Platform | Operating System | Browser Version | FPS | Recommended Configuration | Remarks |
Web | Windows | Chrome 90+ Firefox 90+ Edge 97+ | 30 | Memory: 16GB CPU: i5-10500 GPU: Dedicated 2GB | It is recommended to use the latest version of Chrome browser (Enable hardware acceleration in the browser) |
| | | | 15 | Memory: 8GB CPU: i3-8300 GPU: 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 | Chrome Firefox | 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 | Chrome Safari Firefox | 30 | iPhone 13 | Requires iOS 14.4 or above- It is recommended to use Chrome or Safari browsers |
| | | | 20 | iPhone XR |
Implementation Steps
Step 1: Register the Plugin
Before using it, you need to register the plugin. Below is an example code for registering the plugin:
import TRTC from 'trtc-sdk-v5';import { Beauty } from 'trtc-sdk-v5/plugins/video-effect/beauty';const trtc = TRTC.create({ plugins: [Beauty] });
Step 2: Start the Local Camera
await trtc.startLocalVideo({view: 'local-video' // Fill in the div id});
Step 3: Using Beauty and built-in Effects
Beauty Effect
The beauty effect can be controlled using three interfaces for starting, updating, and stopping:
trtc.startPlugin('Beauty', options)
to enable the beauty effect.trtc.updatePlugin('Beauty', options)
to update the beauty effect parameters.trtc.stopPlugin('Beauty')
to stop the beauty effect.The
options
parameter supports six beauty effect parameters:type BeautifyOptions = {whiten?: number; // Whitening 0-1dermabrasion?: number; // Dermabrasion 0-1lift?: number; // Face Slimming 0-1shave?: number; // Jaw Shaving 0-1eye?: number; // Enlarged Eyes 0-1chin?: number; // Chin Adjustment 0-1}
Built-in Effects
The plugin offers build-in video effects, here is the list:
EffectId | Name |
EDE5D18065451445 | Milk-Bottle-Face-Mask |
7A62218064EF7959 | Felt-Hairband |
B4D63180653948C3 | Bangs-Headband |
D7C6418064B90F4C | Cute-Kitty |
1D6EB18069D76A62 | Polka-Dot-Girl |
CBE7618065D9D76F | Heart-Fireworks |
9B86618065596018 | Cute-Piggy |
428C518065369ACF | Double-Braids |
B30E218064F7B397 | Vibrant-Stickers |
AE3C81806521B49B | Rabbit-Sauce |
We use
EffectId
to identify the effect which will be apply.type EffectListOptions = {id: string;intensity?: number; // specify the strength of the effect}
Example Code
When starting the plugin, the
options
should also include the current user's login information (sdkAppId, userId, userSig) for verification.Here are some code examples:
// Enable the pluginconst options = {sdkAppId: 0,userId: '',userSig: '',// BeautifyOptionswhiten: 0.5, // Whitening 0-1dermabrasion: 0.5, // Dermabrasion 0-1lift: 0.5, // Face Slimming 0-1shave: 0.5, // Jaw Shaving 0-1eye: 0.5, // Enlarged Eyes 0-1chin: 0.5, // Chin Adjustment 0-1// EffectListOptions Arrayeffect: [{id: '7A62218064EF7959', // the effect idintensity: 0.7 // specify the strength of the effect}]}try {await trtc.startPlugin('Beauty', options);} catch (error) {console.error('Beauty start failed', error);}
// Update beauty parametersconst options = {whiten: 0.5, // Whitening 0-1dermabrasion: 0.5, // Dermabrasion 0-1lift: 0.5, // Face Slimming 0-1shave: 0.5, // Jaw Shaving 0-1eye: 0.5, // Enlarged Eyes 0-1chin: 0.5, // Chin Adjustment 0-1effect: [{id: '7A62218064EF7959', // the effect idintensity: 0.7, // specify the strength of the effect},{id: 'D7C6418064B90F4C', // the effect idintensity: 0.7, // specify the strength of the effect}]}try {await trtc.updatePlugin('Beauty', options);} catch (error) {console.error('Beauty update failed', error);}
// Stop the beauty effecttry {await trtc.stopPlugin('Beauty');} catch (error) {console.error('Beauty stop failed', error);}
API Documentation
trtc.startPlugin('Beauty', options)
Enable the beauty effect.
options
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 |
whiten | number | Optional | Whitening, range [0,1] |
dermabrasion | number | Optional | Dermabrasion, range [0,1] |
lift | number | Optional | Face slimming, range [0,1] |
shave | number | Optional | Jaw shaving, range [0,1] |
eye | number | Optional | Enlarged eyes, range [0,1] |
chin | number | Optional | Chin adjustment, range [0,1] |
effect | Array<EffectListOptions> | Optional | effect list |
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. |
EffectListOptions:
Name | Type | Attributes | Description |
id | number | Required | The effect id |
intensity | string | Required | the strength of the effect |
trtc.updatePlugin('Beauty', options)
Allows modification of beauty parameters.
options
Name | Type | Attributes | Description |
whiten | number | Optional | Whitening, range [0,1] |
dermabrasion | number | Optional | Dermabrasion, range [0,1] |
lift | number | Optional | Face slimming, range [0,1] |
shave | number | Optional | Jaw shaving, range [0,1] |
eye | number | Optional | Enlarged eyes, range [0,1] |
chin | number | Optional | Chin adjustment, range [0,1] |
effect | Array<EffectListOptions> | Optional | effect list |
EffectListOptions:
Name | Type | Attributes | Description |
id | number | Required | The effect id |
intensity | string | Required | the strength of the effect |
trtc.stopPlugin('Beauty')
Disables the beauty effect.
Frequently Asked Questions
1. When running the demo in Chrome, the video appears upside down and laggy
This plugin uses GPU acceleration, and you need to enable hardware acceleration mode in your browser settings. You can copy and paste
chrome://settings/system
into your browser's address bar and enable hardware acceleration mode.2. When device performance is insufficient and causes high latency with long rendering times
You can reduce video resolution or frame rate by listening to events.
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('Beauty'); // Or disable the plugin}}await trtc.startPlugin('Beauty', {...// Other parametersonError,});