Implement basic image processing

1 Prerequisites

Before implementing basic AI Effects features, please ensure that:

You have obtained the unique authentication file for the ZegoEffects SDK from ZEGOCLOUD technical support.
You have integrated the SDK into your project. For details, see Integrate the SDK.
You have integrated ZegoExpressSDK into your project. For details, see Quick start.
You have imported ZegoEffects resources and models into your project. For details, see Import resources and models.
A project has been created in ZEGOCLOUD Console and applied for a valid AppID and AppSign. For details, please refer to Console - How to view project information .

2 Implementation Steps

1 Import ZegoExpress React Native SDK

Go to your project root directory and run npm install zego-express-engine-reactnative --save or yarn add zego-express-engine-reactnative to download the ZegoExpress React Native SDK.

Import ZegoExpress React Native SDK.

import ZegoExpressEngine, {
  ZegoPublishChannel,
  ZegoTextureView,
  ZegoVideoConfig,
  ZegoVideoConfigPreset
} 
from "zego-express-engine-reactnative";

import ZegoExpressEngine, {
  ZegoPublishChannel,
  ZegoTextureView,
  ZegoVideoConfig,
  ZegoVideoConfigPreset
} 
from "zego-express-engine-reactnative";

2 Import ZegoEffects React Native SDK

import ZegoEffects from '@zegocloud/zego-effects-reactnative';

import ZegoEffects from '@zegocloud/zego-effects-reactnative';

Call Express's enableCustomVideoProcessing method to enable custom video preprocessing.
Pass in the authentication file and call AI Effects' enableImageProcessing method to enable image processing.
Call AI Effects methods as needed to implement related features.

Warning

When creating the ZegoEffects object, the SDK internally authenticates through AppID and AppSign.

/*
 * Initialize face beautification effects SDK.
 * This method should be called after creating the Express instance.
 */
async function initEffects() {
  // Enable custom video processing for Express and Effects
  // engine is an instance of ExpressEngine
  await engine.enableCustomVideoProcessing(true, {}, ZegoPublishChannel.Main);

  // Log Effects SDK version
  console.log(`Effects version=${await ZegoEffects.getVersion()}`);

  // Get the AppID and AppSign obtained from the  Prerequisites. After internal authentication by the SDK, it will create an Effects object and return the corresponding error code.
  const appID = 1234567890;
  const appSign = "xxxxxxxxxxxx";
  const effects = new ZegoEffects(appID, appSign);

  // Listen for and handle error events
  effects.on('error', (errorCode: number, desc: string) => {
    // Log error information for debugging
    console.error(`Error code: ${errorCode}, Description: ${desc}`);
  });

  // Enable image processing for Effects
  effects.enableImageProcessing(true);

  // Enable and configure skin smoothing effect for better beautification
  effects.enableSmooth(true);
  effects.setSmoothParam({ intensity: 100 });

  // Enable face lifting effect to create a smaller facial appearance
  effects.enableFaceLifting(true);
  effects.setFaceLiftingParam({ intensity: 100 });

  // Additional effects or configurations can be added here
  // For example:
  // effects.enableWhitening(true);
  // effects.setWhiteningParam({ intensity: 50 });

  // Ensure all effects are properly enabled and configured
  console.log('Face beautification effects initialized successfully.');
}

/*
 * Initialize face beautification effects SDK.
 * This method should be called after creating the Express instance.
 */
async function initEffects() {
  // Enable custom video processing for Express and Effects
  // engine is an instance of ExpressEngine
  await engine.enableCustomVideoProcessing(true, {}, ZegoPublishChannel.Main);

  // Log Effects SDK version
  console.log(`Effects version=${await ZegoEffects.getVersion()}`);

  // Get the AppID and AppSign obtained from the  Prerequisites. After internal authentication by the SDK, it will create an Effects object and return the corresponding error code.
  const appID = 1234567890;
  const appSign = "xxxxxxxxxxxx";
  const effects = new ZegoEffects(appID, appSign);

  // Listen for and handle error events
  effects.on('error', (errorCode: number, desc: string) => {
    // Log error information for debugging
    console.error(`Error code: ${errorCode}, Description: ${desc}`);
  });

  // Enable image processing for Effects
  effects.enableImageProcessing(true);

  // Enable and configure skin smoothing effect for better beautification
  effects.enableSmooth(true);
  effects.setSmoothParam({ intensity: 100 });

  // Enable face lifting effect to create a smaller facial appearance
  effects.enableFaceLifting(true);
  effects.setFaceLiftingParam({ intensity: 100 });

  // Additional effects or configurations can be added here
  // For example:
  // effects.enableWhitening(true);
  // effects.setWhiteningParam({ intensity: 50 });

  // Ensure all effects are properly enabled and configured
  console.log('Face beautification effects initialized successfully.');
}

4 Start Publishing Stream

After implementing the face beautification effects above, you can proceed with stream publishing operations.