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.

2 Implementation Steps

1 Import ZegoExpress React Native SDK

1. 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.
2. Import the Express React Native SDK.
   Untitled

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

   1

   Copied!

2 Import ZegoEffects React Native SDK

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

3 Initialize and Call AI Effects Related Methods

1. Call Express's enableCustomVideoProcessing method to enable custom video preprocessing.

2. Pass in the authentication file and call AI Effects' enableImageProcessing method to enable image processing.

3. Call AI Effects methods as needed to implement related features.

   Untitled

   /*
    * 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 authentication info from SDK
     const authInfo: string = await ZegoEffects.getAuthInfo(appSign);
   
     // Contact ZEGOCLOUD support to obtain the license
     const license: string = "";
   
     // Create Effects instance with the obtained license
     const effects = new ZegoEffects(license);
   
     // 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.');
   }
   

   1

   Copied!

4 Start Publishing Stream

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