Tutorial: Enable Beauty Filters

Function Description

This document primarily describes how to use the beauty plugin.

Prerequisites

• Pricing see RTC-Engine Packages.
• TRTC SDK version must be >= 5.5.0
• System and configuration requirements for various platforms are as follows:

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-1
  dermabrasion?: number; // Dermabrasion 0-1
  lift?: number; // Face Slimming 0-1
  shave?: number; // Jaw Shaving 0-1
  eye?: number; // Enlarged Eyes 0-1
  chin?: number; // Chin Adjustment 0-1
}

Built-in Effects

The plugin offers build-in video effects, here is the list:

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 plugin
const options = {
  sdkAppId: 0,
  userId: '',
  userSig: '',
  // BeautifyOptions
  whiten: 0.5, // Whitening 0-1
  dermabrasion: 0.5, // Dermabrasion 0-1
  lift: 0.5, // Face Slimming 0-1
  shave: 0.5, // Jaw Shaving 0-1
  eye: 0.5, // Enlarged Eyes 0-1
  chin: 0.5, // Chin Adjustment 0-1
  // EffectListOptions Array
  effect: [{
    id: '7A62218064EF7959', // the effect id
    intensity: 0.7 // specify the strength of the effect
  }]
}
try {
  await trtc.startPlugin('Beauty', options);
} catch (error) {
  console.error('Beauty start failed', error);
}

// Update beauty parameters
const options = {
  whiten: 0.5, // Whitening 0-1
  dermabrasion: 0.5, // Dermabrasion 0-1
  lift: 0.5, // Face Slimming 0-1
  shave: 0.5, // Jaw Shaving 0-1
  eye: 0.5, // Enlarged Eyes 0-1
  chin: 0.5, // Chin Adjustment 0-1
  effect: [{
    id: '7A62218064EF7959', // the effect id
    intensity: 0.7, // specify the strength of the effect
  },{
    id: 'D7C6418064B90F4C', // the effect id
    intensity: 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 effect
try {
  await trtc.stopPlugin('Beauty');
} catch (error) {
  console.error('Beauty stop failed', error);
}

API Documentation

trtc.startPlugin('Beauty', options)

Enable the beauty effect.

options

EffectListOptions:

trtc.updatePlugin('Beauty', options)

Allows modification of beauty parameters.

options

EffectListOptions:

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 rate
    await trtc.updateLocalVideo({
      option: {
        profile: '480p_2'
      },
    });
    // await trtc.stopPlugin('Beauty'); // Or disable the plugin
  }
}
await trtc.startPlugin('Beauty', {
  ...// Other parameters
  onError,
});