Blueprint a Video Call App Inside Unreal Engine

Hey devs,
In this demo, I’ll walk you through each step needed to create a video calling app using Unreal Engine with the Agora SDK plugin!

For this example, I’ll use Unreal Engine 4.25 and the current Agora SDK.

Getting Started

• Download the Unreal Engine here
• Download the Agora plugin here
• Sign up for an Agora account

Create a Project

Now, let’s build a project from scratch.

1. Open the Unreal Engine Editor and click New project.…
2. On the New Project panel, choose C++ as the project type, enter the project name, choose the project location, and click Create Project.

3. Uncomment the PrivateDependencyModuleNames line in the [your_project]/Source/[project_name]/[project_name].Build.cs file.

Unreal Engine causes a compile error if the line is left commented out.

Installation

1. Download the plugin here if you haven’t already
2. Copy the plugin to [your_project]/Plugins. Your project should look like [project_name]/Plugins/AgoraPlugin
3. Add plugin dependency into the [your_project]/Source/[project_name]/[project_name].Build.cs file, Private Dependencies section
   PrivateDependencyModuleNames.AddRange(new string[] { "AgoraPlugin", "AgoraBlueprintable" });
4. Restart Unreal Engine (if it is running).
5. Go to Edit > Plugins. Find the Project > Other category and make sure that AgoraPlugin is enabled

Create Game Instance

Go to the Content project and create the new Blueprints directory. Right-click the content and select Blueprint Class:

In the All Classes section, type “Game Instance” and select the Game Instance class:

Name the new GameInstance AgoraGameInstance_BP:

The GameInstance is initialized before other classes so you create Agora here.

Go to the AgoraGameInstance_BP blueprint (double-click). Right-click the blueprint workspace, type “Event Init,” and select Event Init:

Drag and drop the Event Init output pin, type “Construct,” and select Construct Object from the Class function:

From the Class drop-down menu, select Agora, drag and drop the Outer input pin, and select Get reference to self:

Drag and drop the Construct Agora output Return Value pin and select Promote to variable option. Name the new variable Agora, and make it public by clicking the eye symbol in front of the variable name:

Drag and drop the variable output node and in the Agora section find the Initialize method:

Initialize Agora with your own AppID, which is found in the Agora dev console.

Create Game Mode

Game Mode will be used to switch between widgets. Go to the Blueprints directory and create a GameMode as you did with Game Instance:

Name it GameMode_BP:

Create Widgets

Go to the Content project and create the Widgets_BP directory. Right click the directory content and select User Interface > Widget Blueprint to add two widgets in this directory:

Name them IntroductionWidget_BP and VideoCallWidget_BP:

Implement Game Mode

Go back to GameMode_BP and add two functions by clicking + in front of the Functions section. Name them SetIntroductionView and SetVideoCallView. Add two variables called IntroductionWidget_BP and VideoCallWidget_BP and change the types of these variables to Introduction Widget BP and Video Call Widget BP, respectively:

Implement functions as shown:

Implement Introduction Widget

Go to IntroductionWidget_BP, and create the widget interface as shown:

Add initial variables to EncriptionTypeComboBox:

Go to graph view (top-right corner), find Event Construct, and implement it as shown:

Here, the IntroductionWidget_BP gets the Agora object from AgoraGameInstance_BP and sets the Agora SDK version to Text Block at the bottom of the widget.

Go back to Designer view, select JoinButton, find the Events section, and add an OnClicked event:

Implement the event as shown:

Note: This project is meant for reference purposes and development environments, it is not intended for production environments. Token authentication is recommended for all RTE apps running in production environments. For more information about token based authentication within the Agora platform please refer to this guide: https://bit.ly/3sNiFRs

Implement Video Call Widget

Find the Content/ButtonTextures directory in the demo application. (You don’t have to open the project. Simply find this folder in the filesystem) All button textures are stored there. In your project content create a directory called ButtonTextures. Drag and drop all button images there to make them available in your project.

Go to VideoCallLevel_BP, and create widget interface as shown:

Open Graph view, add the isLocalAudioMuted and isLocalVideoMuted boolean variables, and the CurrentUserId Integer64 variable. Add functions and implement them as shown:

Go to the Event Graph section and implement events as shown:

Create a New Level

Go to the Content folder and create a new folder named Levels if it doesn’t exist already. Right-click the directory content and select New Level:

Rename the level to VideoCallLevel_BP:

Select this level, click the Blueprints icon on the top, and go to the Open Level Blueprint option:

Implement Event Begin Play as shown:

Modify Settings

Modify World Settings

Now you need to set your custom GameMode class. Go to Window > WorldSettings and set GameMode to GameMode_BP:

Modify Project Settings

Go to Edit > Project Settings and select the Maps & Modes section. Specify values as shown:

Run the Game

Windows

Go to File > Package Project > Windows > Windows(64-bit), select a folder where you want to place the package, and wait for the result.

Mac

Go to File > Package Project > Mac and specify the Builds folder you want to build to. Before running the game, you have to add permissions.

Mac Build Setup

Add the following permissions in the info.plist file for device access:

Note: To access the .plist file, right-click <YourBuildName>.app file and select Show Package Contents. Inside Contents you will see the info.plist file

Add these permissions to the file:

• Privacy — Camera Usage Description
• Privacy — Microphone Usage Description

Add the AgoraRtcKit.framework folder to your build:

1. Go back to your project directory and open the Plugins folder.
2. From Plugins/AgoraPlugin/Source/ThirdParty/Agora/Mac/Release, copy the AgoraRtcKit.framework file.
3. Paste AgoraRtcKit.framework into your newly built project folder <Packaged-project-dir>/MacNoEditor/[project_name]/Contents/MacOS/.

iOS Packaging

To package the project for iOS, you need to generate a signing certificate and provisioning profile. Follow the instructions in the UE4 documentation: iOS Provisioning

Tip: I recommend going to ProjectSettings > Build > and selecting the Automatic Signing checkbox.

Then you need to add the certificate and the provisioning profile to your project:

Go to Edit > Project Settings > Platforms: iOS, and select the certificate and provisioning profile you created before.

If you don’t see one of them in the table, click Import Certificate or Import Provision, choose the correct file in Finder, and click Open.

Then enter a Bundle Identifier: it must be the Bundle ID you used during certificate creation.

iOS Permissions

For testing iOS, I recommend testing by clicking the Launch button at the top bar of the Unreal Editor, with your iOS device selected in the launch settings.

Add the following permissions in the info.plist file for device access:

• Privacy — Camera Usage Description
• Privacy — Microphone Usage Description

To add them in the info.plist, go to Edit > Project Settings > Platforms: iOS and enter the following line to Additional Plist Data: <key>NSCameraUsageDescription</key><string>AgoraVideoCall</string> <key>NSMicrophoneUsageDescription</key><string>AgoraVideoCall</string>

Now you are ready to package your project for iOS or launch it on an iOS device.

If you’d like to contact our DE support team, find us on slack here!