How to use video call API to build a live video call app
Tags: ios, mobile, api, programming
Published: 2022-07-25 12:07:33

## Introduction
With the continuous improvement of device performance and network quality, more and more audio and video call scenarios have been applied, and video call API has also been applied more and more.

What capabilities can the video call API provide?

With the increasing demand for video call API, there are more and more companies providing video call API, but the functions provided are similar.

The capabilities provided by the video call API mainly include the following:
1. Call invitation
2. Voice and Video call
3. Offline push function
4. Call UI and interaction

Below is a live video call app built using ZEGOCLOUD's video call API.
![video call API demo](https://resource.zegocloud.com/content_resource/2022/07/25/calluikit96010fps.gif)


## What is ZEGOCLOUD's video call API?
ZEGOCLOUD's video call API uses a layered architecture. Details are as shown in the figure below:

![video call API architecture](https://resource.zegocloud.com/content_resource/2022/07/25/16507993587607.png)

ZEGOCLOUD's video call API provides two different SDKs for you: the `CallUIKit` and the `Call SDK`.

`CallUIKit`: Provide a complete live video call UI, you only need to call the call interface and hang up the interface where you need to complete the call process.

`Call SDK`: Provides the underlying logic of live video calls, such as audio and video management, call management, network status management, etc. You only need to focus on the implementation of the upper-layer custom UI and call the corresponding interactive interface to complete the call process.


## How to use ZEGOCLOUD's Video call API

### Step 1. Create a ZEGOCLOUD account
- Create an account in [ZEGOCLOUD Official](https://www.zegocloud.com/account/signup?_source=dev&article=25). 

![create an account](https://resource.zegocloud.com/content_resource/2022/07/25/16508858112630.gif)

### Step 2. Create a new project
- Create a project in [ZEGOCLOUD Admin Console](https://console.zegocloud.com?_source=dev&article=25). 

![creata a project](https://resource.zegocloud.com/content_resource/2022/07/25/16508858234388.gif)

### Step 3. Create a Firebase project
Create a Firebase project in the [Firebase console](https://console.firebase.google.com/). For more details, see [Firebase Documentation](https://firebase.google.com/docs/functions/get-started).

![create firebase](https://resource.zegocloud.com/content_resource/2022/07/25/16508878183242.gif)

### Step 4. Deploy the Firebase Cloud Functions

ZEGO Call uses the Firebase Cloud Functions as the business server by default, we recommend you activate and deploy it before integrating the ZEGOCall SDK.

1. Create a new Realtime Database in Firebase. 
![create firebase](https://resource.zegocloud.com/content_resource/2022/07/25/16509539597267.gif)

2. Edit the rules of the Realtime Database by adding the following:
```json
{
  "rules": {
        ".read": "auth.uid != null",
        ".write": "auth.uid != null",
  }
}
```
![Edit the rules](https://resource.zegocloud.com/content_resource/2022/07/25/16509540888361.jpg)

3. Install the CLI via npm.
    ```
    npm install -g firebase-tools
    ```
    ![Install the CLI](https://resource.zegocloud.com/content_resource/2022/07/25/16509597070259.gif)

4. Run the `firebase login` to log in via the browser and authenticate the firebase tool.   
![firebase login](https://resource.zegocloud.com/content_resource/2022/07/25/16509597756605.gif)

5. Run `firebase init functions`. The tool gives you an option to install dependencies with npm. It is safe to decline if you want to manage dependencies in another way, though if you do decline you'll need to run npm install before emulating or deploying your functions.

![init functions](https://resource.zegocloud.com/content_resource/2022/07/25/16509598453979.gif)

6. Download the [Cloud function sample code](https://github.com/ZEGOCLOUD/call_firebase_funcitons). 
![Download file](https://resource.zegocloud.com/content_resource/2022/07/25/16509598698059.gif)

7. Copy the `firebase.json`, `functions\index.js` files and `functions\token04` folder in the sample code to your cloud function project, overwrite files with the same name.  

![copy file](https://resource.zegocloud.com/content_resource/2022/07/25/16509602283059.jpg)

![copy file](https://resource.zegocloud.com/content_resource/2022/07/25/16509599977538.gif)

8. Modify the `index.js` file, fill in the AppID and ServerSecret you get from [ZEGOCLOUD Admin Console](https://console.zegocloud.com?_source=dev&article=25) correctly.

![write appID](https://resource.zegocloud.com/content_resource/2022/07/25/16509600852118.gif)

9. In Firebase CLI, run the `firebase deploy --only functions` command to deploy the cloud functions. 
![deploy the cloud functions](https://resource.zegocloud.com/content_resource/2022/07/25/16509614647425.jpg)

### Step 5. Copy file into the project
To integrate the ZEGOCallUIKit automatically with CocoaPods, do the following:

1. Download the [Sample codes](https://codestore.zegocloud.com/project/2), and copy the `ZEGOCallUIKit` and `ZEGOCall` folders to your project directory (if you have no project, create a new one). 
![AddCallUIKit](https://resource.zegocloud.com/content_resource/2022/07/25/addcalluikit.gif)

2. Open Terminal, navigate to your project directory, run the `pod init` command to create a `Podfile`, and then add the following to the file.

    ```
    pod 'ZegoExpressEngine'
    
    pod 'FirebaseAuth'
    pod 'GoogleSignIn'
    pod 'Firebase/Database'
    pod 'Firebase/Analytics'
    pod 'Firebase/Crashlytics'
    pod 'Firebase/Messaging'
    pod 'Firebase/Functions'
    ``` 
![pod install](https://resource.zegocloud.com/content_resource/2022/07/25/16511987175740.png)


3. In Terminal, navigate to the directory where the Podfile locates, and run the `pod install` command. 

    ```
    pod install
    ``` 
4.  Restart the Xcode, and open the newly generated .workspace file.

### Step 6. Add permissions

Permissions can be set as needed.

1. Open Xcode, select the target object, and then click **Info > Custom iOS Target Properties**.

![Add permissions](https://resource.zegocloud.com/content_resource/2022/07/25/16511988964502.png)

2. Click the **Add button (+)** to add camera and microphone permissions.

- `Privacy-Camera Usage Description`

- `Privacy-Microphone Usage Description`

![Add permissions](https://resource.zegocloud.com/content_resource/2022/07/25/16511989087665.png)


3. Select the target project, select **Sign&Capabilities > Capability**, search for **Background Modes** and make a double click. 
![Background Modes](https://resource.zegocloud.com/content_resource/2022/07/25/16511989209243.png)


4. Check the following options in **Background Modes**.
![Background Modes](https://resource.zegocloud.com/content_resource/2022/07/25/16511989320090.png)


5. Enable the **Push Notification** feature. 
![Background Modes](https://resource.zegocloud.com/content_resource/2022/07/25/16511989408120.png)


6. Download the config file **GoogleService-Info.plist** of firebase, and add it to your project. To get the config file, refer to [How to get the config file?](https://firebase.google.com/docs/ios/setup#add-config-file).
![add GoogleService-Info.plist](https://resource.zegocloud.com/content_resource/2022/07/25/16511991049936.png)
![add GoogleService-Info.plist](https://resource.zegocloud.com/content_resource/2022/07/25/16511991135668.png)
      

7. Set up the **URL Types**: Fill in the **URL Schemes** with the **REVERSED_CLIENT_ID** field in the **GoogleService-Info.plist** file. 
![set up URL Types](https://resource.zegocloud.com/content_resource/2022/07/25/16511991392424.png)



## Initialize the ZEGOCallUIKit 

To initialize the ZEGOCallUIKit, get the `CallManager` instance, pass the AppID of your project. 

{% embed https://gist.github.com/larryluoo/b5e845aa4985def2d9bfded7557f305b %}

To receive callbacks, set the corresponding `delegate` to `self`.

{% embed https://gist.github.com/larryluoo/477ce47871a4e51509517640690ba452 %}

## User login

ZEGO Call does not provide user management capabilities yet. You will need to have users log in to Firebase and then call the `setLocalUser` method to set user information to CallUIKit based on the login result.

Firebase provides multiple login authentication modes. The following uses Google login as an example.
For more modes, refer to the [Firebase official](https://firebase.google.com/docs/auth/where-to-start).

{% embed https://gist.github.com/larryluoo/0a8e17eea89685d8e2b62c124013f413 %}

## Get a Token

<div class="mk-warning">

ZEGO Call implements the voice and video call feature using the RTC SDK. The caller and called user join the same room and the stream publishing and stream playing start upon the call gets connected. Therefore, to make an outbound call, you will need to provide a token for the RTC SDK for validation. For details, see [Use Tokens for authentication](#11648). 
  
</div>

Before making or accepting an outbound call, you will need to get a Token from the Firebase Cloud Functions.

{% embed https://gist.github.com/larryluoo/1dbe68411aa47f8f91e53c14d3d442e4 %}


To set a Token to the token property of the `CallManager`, implement the agent-owned callback `getRTCToken` of the `TokenProvider`.

{% embed https://gist.github.com/larryluoo/ff00a3adbfd4487fd21a23fd1338c0ef %}

## Make outbound calls

To make an outbound voice call, call the `callUser` method and set the `type` parameter to `CallType.voice`.

{% embed https://gist.github.com/larryluoo/73f3f0ada107390df7aa5db876b704dc %}

To make an outbound video call, call the `callUser` method and set the `type` parameter to `CallType.video`.

{% embed https://gist.github.com/larryluoo/32f3253d1a26006cbfac88330556156c %}

After making a call, the CallUIKit shows the UI of the current state automatically for both the callee and caller (integrated the CallUIKit is required), and, you can operate on the UI for further operations.

- The following displays when the caller calls the method to make a call (make a voice call for illustration)
![call ui](https://resource.zegocloud.com/content_resource/2022/07/25/16511991618968.png)

- The following black pop-up prompts when the callee receives an incoming call (make a voice call for illustration)
![incoming call ui](https://resource.zegocloud.com/content_resource/2022/07/25/16511991916576.png)

## Upload logs

When you encounter problems when using your app, call the `uploadLog`  method to upload logs for us to locate and help you faster.

{% embed https://gist.github.com/larryluoo/eb2aad68c5270f563673ff72c10c17c6 %}

## Deinitialize the ZEGOCallUIKit

After finishing using the ZEGO Call, call the `unInit` method to deinitialize the SDK. 

{% embed https://gist.github.com/larryluoo/ce3015f92bc6c4373848e3223f61a976 %}