Create a Virtual Avatar with ZEGOCLOUD in Android App

·

6 min read

As AI is growing in the tech world, we are seeing some advanced features and unrealistic development. features like Metaverse, Where you can create your virtual avatar and from any part of the world you can join events, can visit friends, do shopping, do streaming as an influencer and much more.

Now almost every popular app like Facebook, Instagram, Snapchat, etc uses an avatar as their core feature to show emotions, whether you are chatting with friends or out shopping, meeting at any event virtually, Avatar is a must.

If you also looking to create an App that can use Avatars to show users emotions, success, victory, meetups, and much more, you can explore ZEGOCLOUD.

ZEGOCLOUD is a platform where you can get more than just a feature. One of the coolest products they have is Avatar, You can use the product and integrate it in your Android/IOS apps and make a cool impact on your users.

ZEGOLCOUD provides a free plan with that you can try their different products.

Features

  1. Automatic avatar generation: When a user uploads the image or takes self from the camera the ZEGOCLOUD-trained AI algorithm detects the edges and generates an avatar.

  2. Manual avatar creation: When ZEGOCLOUD detects the uploaded image edge you can Synthesize all the parameters into a custom virtual face and creates an exclusive avatar.

  3. Speech simulation: With this feature, you can customize your Avatar to show emotions with speech.

  4. Gesture recognition: With capture the real-time emotions/key point movements, You Avatar behave as you.

Where most of it use

  1. Voice chat and live streaming: ZegoAvatar SDK is used widely in apps for voice chat, live streaming, and other entertainment scenarios, This feature makes apps more playable and interesting while enabling real-time human-avatar interaction between humans and avatars.

  2. Social media interaction: ZegoAvatar SDK help apps where user have introverted personality and want to chat with strangers without showing their faces. The SDK can help to create a customized Avatar.

Platform supported
iOS Available iOS 11.0 or later
Android Available Android 5.1 or later

Make sure

  1. The ZegoAvatar SDK should be integrated into the current project

  2. The camera permission should be enabled.

Implementation steps

To use Virtual Avatar you need to obtain license file with online authentication.

You can get AppID and AppSign by creating project from ZEGOCLOUD dashboard.

Contact ZEGOCLOUD technical support and provide the package name of your project to enable related permissions

Copy code in im.zego.zegoavatarexample.licensehelper of the sample source code obtained from SDK downloads to your project.

Import dependency library files.

// The reference code needs to depend on these library files.
implementation "com.google.code.gson:gson:2.8.8"
implementation 'com.squareup.okhttp3:okhttp:4.9.0'

Enter the obtained AppID and AppSign correctly bby modifying the ZegoAvatarConfig.java file

public class ZegoAvatarConfig {
    // The address of the authentication server.
    public final static String BACKEND_API_URL = "https://aieffects-api.zego.im?Action=DescribeAvatarLicense";
    // The AppID get from ZEGOCLOUD. The AppID is bound to the ApplicationId. Change the ApplicationId in app/build.gradle to the package name provided during AppID application.
    public final static long APP_ID = YOUR_APP_ID;
    // The AppSign get from ZEGOCLOUD.
    public final static String APP_SIGN = YOUR_APP_SIGN;
}

In app/build gradle modify the applicationId to the package name which was providing during AppID application

android file snap

To obtain the authentication license Call a network request by using the getLicense API in ZegoLicenseHelper.

ZegoLicenseHelper.getLicense(this, (code, message, response) -> {
    // License obtained.
    if (code == 0) {
        String license = response.getLicense();
        // The license is required during ZegoAvatarService initialization. 
the license should be correct else related features will be unavailable.
        ZegoServiceConfig config = new ZegoServiceConfig(license,
                    getFilesDir().getAbsolutePath() + "/assets/AIModel.bundle/");
        // The init is an asynchronous method. 
call the Init method before using ZegoAvatarService SDK, With the help of addServiceObserver you can listen SDK status.Before you use the ZegoAvatarService SDK, ensure that the init method has been performed. You can listen for the SDK status through addServiceObserver.
        ZegoAvatarService.init(MainActivity.this.getApplication(), config);
    } else {
        // Failed to obtain the license.
        Toast.makeText(MainActivity.this, "Failed to obtain the license. code: " + code, Toast.LENGTH_LONG).show();
    }
});

Import the following code before initialize the AvatarService

import com.zego.avatar.OnRecordStartCallback;
import com.zego.avatar.OnRecordStopCallback;
import com.zego.avatar.ZegoAvatarService;
import com.zego.avatar.ZegoAvatarView;
import com.zego.avatar.bean.ZegoGenderType;
import com.zego.avatar.bean.ZegoAvatarQualityLevel;
import com.zego.avatar.bean.ZegoAvatarServiceState;
import com.zego.avatar.bean.ZegoExpressionDetectMode;
import com.zego.avatar.bean.ZegoModelType;
import com.zego.avatar.bean.ZegoServiceConfig;
// Copy resources to an SD card first. Note: When you use the resources, determine whether the resources are already copied to prevent repeated copies. Resources can also be downloaded from the Internet.
AssetsFileTransfer.copyAssetsDir2Phone(this.getApplication(),
            "AIModel.bundle"/*assets root directory in apk*/, "assets"/* Directory in the SD card. The value is getFilesDir().getAbsolutePath() + File.separator + destPath. */);
AssetsFileTransfer.copyAssetsDir2Phone(this.getApplication(),
            "base.bundle", "assets");
AssetsFileTransfer.copyAssetsDir2Phone(this.getApplication(),
            "Packages", "assets");
String license = "xxxxxxx"; // The license obtained from the authentication server.
String AIPath = getFilesDir().getAbsolutePath() + "/assets/AIModel.bundle"; // The absolute path of the AI model.
ZegoServiceConfig config = new ZegoServiceConfig(license, AIPath);
ZegoAvatarService.init(AvatarApplication.this, config);
// avatarService initialization status callback.
ZegoAvatarService.addServiceObserver(new ZegoAvatarServiceDelegate(){
    @Override
    public void onError(ZegoAvatarErrorCode code, String desc) {
        mMainHandler.post(() ->{
            ZALog.e("errorcode : " + code.getErrorCode() + ",desc : " + desc);
        });
    }
    @Override
    public void onStateChange(ZegoAvatarServiceState state) {
        // init status callback.
    }
});
public class AvatarMainActivity extends BaseActivity implements ZegoAvatarServiceDelegate {
    private ZegoAvatarView mZegoAvatarView;
    private IZegoInteractEngine mZegoInteractEngine;
    private ZegoCharacterHelper mCharacterHelper;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // Wait for ZegoAvatarService initialization to complete.
        ZegoAvatarService.addServiceObserver(this);
        mZegoAvatarView = findViewById(R.id.zego_avatar_view);
    }
    @Override
    public void onStateChange(ZegoAvatarServiceState state) {
    if (state == ZegoAvatarServiceState.InitSucceed) {
            AvatarMainActivity.this.runOnUiThread(() -> {
                // Create a ZegoCharacterHelper class to simply the implementation process for API call.
                mCharacterHelper = new ZegoCharacterHelper(getFilesDir().getAbsolutePath() + "/assets/base.bundle"); // The absolute path of basic resources.

                mCharacterHelper.setExtendPackagePath(getFilesDir().getAbsolutePath() + "/assets/Packages"); // Set the directory where the makeup, hair, glass, and other resource packages are stored.
                // Set the default avatar. The options include "male" and "female".
                mCharacterHelper.setDefaultAvatar("female");
                // Display the avatar on the screen and call the API on a UI thread.
                mCharacterHelper.setCharacterView(mZegoAvatarView);
                // Create the facial expression mirroring model.
                // !!! Note: Obtain the camera or voice permission from users if required.
                mZegoInteractEngine = ZegoAvatarService.getInteractEngine();
                if (mZegoInteractEngine != null) {
                    // Enable facial expression mirroring.
                    mZegoInteractEngine.startDetectExpression(ZegoExpressionDetectMode.Camera,expression -> {
                        zegoCharacter.setExpression(expression);
                    });
                }
            });
            ZegoAvatarService.removeServiceObserver(this);
        }
    }
}

Conclusion

Overall, The future of these virtual avatars is bright indeed. More and more people are using them every day to express their feelings, emotions, and so on in much better ways than could be achieved with an emoji or two. We stand to benefit from apps having these features in the future, as well as the companies building them. It's encouraging to see a library like ZEGOCLOUD being released to the public, offering developers a quick and easy way to add this functionality to their own creations. I would highly recommend checking it out if you're planning on integrating avatars into your app in the future.

Demo App Link HERE
Integration Doc HERE