@zegocloud/zego-effects-reactnative
v1.0.24
Published
React Native Zego Effects for Android & iOS
Downloads
306
Readme
zego-effects-reactnative
Zego Effects SDK for React Native.
Getting started
$ yarn add @zegocloud/zego-effects-reactnative
Usage
Download and Import Resources into the Project
Download the latest version of the Effects SDK from the SDK download site (iOS download link: https://doc-zh.zego.im/article/15898, Android download link: https://doc-zh.zego.im/article/15899). After extracting it, import the Resources
and Models
folders into your project.
Note: You only need to add the resources and models to your project; @zegocloud/zego-effects-reactnative
will automatically download the SDK itself.
- iOS: Add the
Resources
andModels
folders to your Xcode project and choose theCreate folders
option in theGroup
settings. Assuming your project name isexample
and you place all resources in theAssets
folder, your project directory structure should look like this after importing:
# ios
├── example
│ ├── AppDelegate.h
│ ├── AppDelegate.mm
│ ├── Images.xcassets
├── Assets
│ ├── Models
│ │ ├── FaceDetectionModel.model
│ │ └── SegmentationModel.model
│ └── Resources
│ ├── ColorfulStyleResources
│ ├── CommonResources.bundle
│ ├── FaceWhiteningResources.bundle
│ ├── MakeupResources
│ ├── PendantResources.bundle
│ ├── RosyResources.bundle
│ └── TeethWhiteningResources.bundle
│
- Android: Add the
Resources
andModels
folders to theassets
directory in your Android project. Typically, the resources should be placed in theandroid/app/src/main/assets
directory, so your project directory structure should look like this after importing:
# android/app/src/main
├── AndroidManifest.xml
├── assets
│ ├── Models
│ │ ├── FaceDetectionModel.model
│ │ └── SegmentationModel.model
│ └── Resources
│ ├── ColorfulStyleResources
│ ├── CommonResources.bundle
│ ├── FaceWhiteningResources.bundle
│ ├── MakeupResources
│ ├── PendantResources.bundle
│ ├── RosyResources.bundle
│ └── TeethWhiteningResources.bundle
├── java
└── res
Code Invocation
import ZegoEffects from '@zegocloud/zego-effects-reactnative';
/**
* Initializes the beauty effects SDK.
* This method should be called after the Express instance is created.
*/
async function initEffects() {
// Enable custom video processing for Express and Effects
// engine is an instance of ExpressEngine
await engine.enableCustomVideoProcessing(true, {}, ZegoPublishChannel.Main);
// Log the version of the Effects SDK
console.log(`Effects version=${await ZegoEffects.getVersion()}`);
// Retrieve authentication information from the SDK
const authInfo: string = await ZegoEffects.getAuthInfo(appSign);
// Fetch the license from the Zego server, see: https://doc-zh.zego.im/article/12199
const license: string = await getLicenseFromZegoServer(appID, authInfo);
// Create an Effects instance with the fetched license
const effects = new ZegoEffects(license);
// Listen for error events and handle them
effects.on('error', (errorCode: number, desc: string) => {
// Log the error message for debugging purposes
console.error(`Error code: ${errorCode}, Description: ${desc}`);
});
// Enable custom handler for Express and image processing for Effects
effects.enableImageProcessing(true);
// Enable and configure the smoothing effect for better beautification
effects.enableSmooth(true);
effects.setSmoothParam({ intensity: 100 });
// Enable the face-lifting effect to create a smaller face appearance
effects.enableFaceLifting(true);
effects.setFaceLiftingParam({ intensity: 100 });
// Additional steps can be added here for other effects or configurations
// For example:
// effects.enableWhitening(true);
// effects.setWhiteningParam({ intensity: 50 });
// Ensure that all effects are properly enabled and configured
console.log('Beauty effects initialized successfully.');
}