DEV Community

Cover image for ZegoAvatar SDK: Create your own Avatar
ZEGOCLOUD Dev
ZEGOCLOUD Dev

Posted on

ZegoAvatar SDK: Create your own Avatar

The metaverse and virtual reality allow us to redesign our reality or recreate our image as we prefer. As many of you know, it’s essential to create your own Avatar for navigating many virtual places.

ZegoAvatar SDK for Custom Avatar Creation

We now introduce the most powerful and innovative tool to create your own Avatar. It is the new ZegoAvatar SDK developed by ZEGOCLOUD.

Its undoubted quality lies in its powerful avatar customize capabilities, which take avatar customization to a new level. Try the ZegoAvatar demo app to create your virtual self and see how easy it is by just facing your camera.

If you are a developer or passionate about these topics and want to try to integrate ZegoAvatar SDK, then this section is for you. Let’s go through this tutorial together.

Make sure to have a ZEGOCLOUD account first, so sign here. You can use it for this free trial or anytime you want to integrate features or build real-time engagement into your apps using ZEGOCLOUD products.

The SDK is available for multiple platforms and systems. Let’s pick iOS now.

Create project
After logging in to your ZEGOCLOUD account, the first step is creating a project. It’s essential for app creation, where we define many parameters for our project.

  1. Launch Xcode

Launch Xcode and select Create a new Xcode project or File → New → Project. Another window will open; select the iOS application (in this example, we decided to try the iOS platform). Select Application → App, and click Next.

Image description

  1. Add a product name and an organization identifier.

These details are essential to our application. They act as bundle identifiers that uniquely identify our app throughout the system. After entering the necessary information, click on “Next.”

Image description

After clicking on “Next,” select the project storage path, and click “Create” to create the project.

Image description

Import SDK
To import the Avatar customizer, follow these steps:

  1. Download the SDK

Download and install the ZegoAvatar SDK. You will find it on the SDK download. The page is generic, like the image below.

Image description

After downloading the File, you can see that it’s compressed. Decompress the package to extract all the SDK’s files.

  1. Adding the SDK Library to the project directory

The first library file you need to add is the dynamic library file ZegoAvatar.xcframework. It’s easy, to copy the File manually to the project’s directory. To further simplify: Open Xcode, select *File *→ Add Files to [Project Name], and add the SDK Library file to the project.

Image description

  1. TARGETS Configurations

The TARGETS specify a product containing the instructions for building the product from a set of files in a project. You will use TARGETS to point to customize avatar creation projects and instructions from our SDK Library file.

Below are some Target configurations needed for the project:

Select Targets → General → Frameworks, Libraries, and Embedded Content, add ZegoAvatar.xcframework, and set Embed to Embed & Sign.

Image description

Select TARGETS → Build Settings, → Build Options, and set Enable Bitcode to NO.

Image description

  1. Set Permission

Permission is needed to access device resources, like the camera and storage. This can be done through the following steps:

Select TARGETS → Info → Custom iOS Target Properties.

Image description

Click the plus icon (+) and add the camera and microphone permissions: We’ll use the camera to capture facial expressions using the mirroring feature [Privacy - Camera Usage Description]. and a microphone will be used for speech simulation [Privacy - Microphone Usage Description]

Image description

Import resource packages
To use the AI capabilities the ZegoAvatar SDK provides, you must import the corresponding resource packages. Visit the SDK Downloads page to get the needed resource packages.

You can import these packages in two ways: “dynamic downloading” or the “added from local” method.

Follow the steps below to import packages:

Locate the assets folder, and drag the folder into your project folder.

Image description

. A dialogue box will appear after dropping the package folder into your project. Select Create folder references to add the folder

Image description

Your folder structure will change and look like the one below. This shows that the following assets: AIModel.bundle, base.bundle, and Packages have been added to project directory.

Image description

Congratulations, you are done integrating the ZegoAvatar SDK.

Time to create your own Avatar with the unique customized options you have. If you need guidance on how to use the ZEGOCLOUD Avatar maker, consult this guide at the voice ‘How to create a custom Avatar‘.

Follow ZEGOCLOUD blog for more tutorials, news, and product updates.

Top comments (0)