

Voice Call v4.0.0 Beta





Start a Video Call

Last updated 2022/09/29 06:29:59

Real-time video chatting immerses people in the sights and sounds of human connections, keeping them engaged in your app longer.

This page shows the minimum code you need to integrate high-quality, low-latency Video Call function into your app using the Video SDK.

Understand the tech

The following figure shows the workflow you need to integrate into your app in order to achieve Video Call functionality.

To start video call, implement the following steps in your app:

1. Set the role

Set both app clients as the host.

2. Join a channel

Call joinChannel to create and join a channel. When using the same App ID, users who pass in the same channel name enter the same channel.

3 and 4. Publish and subscribe to audio and video in the channel

After joining a channel, both hosts can publish video and audio stream to the channel and subscribe to each other.

Prerequisites

Xcode 12.0 or later.
Two iOS devices running iOS 9.0 or later.
A computer that can access the Internet. Ensure that no firewall is deployed in your network environment, otherwise the project fails.
A valid Agora account and an Agora project. Please refer to Start using the Agora platform and get the following information from Agora Console:
- The App ID: A randomly generated string provided by Agora for identifying your app.
- A temporary token: A token is the credential that authenticates a user when your app client joins a channel. A temporary token is valid for 24 hours.
- The channel name: A string that identifies the channel.
Apple developer account.

Project setup

In order to create the environment necessary to integrate Video Call into your app, do the following in Xcode:

Create a new project for an iOS app using the App template. Make sure you select Storyboard as Interface, and Swift as Language.

If you have not added any team information, you can see an Add account... button. Click it, input your Apple ID, and click Next to add your team.
Enable automatic signing for your project.
Set the target devices to deploy your iOS app.

Add project permissions for microphone and camera usage.

Open the info.plist file in the project navigation panel, and edit the property list to add the following properties:

key	type	value
Privacy-Microphone Usage Description	String	The purpose for accessing the microphone, such as for a call or live interactive streaming.
Privacy-Camera Usage Description	String	To access the camera, such as for a call or live interactive streaming.

Integrate the Video SDK into your project.

Go to File > Swift Packages > Add Package Dependencies..., and paste the following link:

https://github.com/AgoraIO/AgoraRtcEngine_iOS.git

In the next sheet, specify version requirements according to your needs.

For more integration methods, see Other approaches to integrating the SDK.

Implement a client for Video Call

This section shows how to use the Agora Video SDK to implement Video Call into your app step by step.

Create the UI

When creating the user interface for basic Video Call, Agora recommends adding the video view of the host on both the local and remote clients. Refer to the following code samples to create a basic UI from scratch:

import UIKit
class ViewController: UIViewController{
    ...
    // Defines localView
    var localView: UIView!
    // Defines remoteView
    var remoteView: UIView!
    // Defines agoraKit
    var agoraKit: AgoraRtcEngineKit!

    // Sets the video view layout
    override func viewDidLayoutSubviews(){
        super.viewDidLayoutSubviews()
        remoteView.frame = self.view.bounds
        localView.frame = CGRect(x: self.view.bounds.width - 90, y: 0, width: 90, height: 160)
    }

    func initView(){
        // Initializes the remote video view. This view displays video when a remote host joins the channel.
        remoteView = UIView()
        self.view.addSubview(remoteView)
        // Initializes the local video window. This view displays video when the local user is a host.
        localView = UIView()
        self.view.addSubview(localView)
    }
}

Implement the Video Call logic

The following figure and steps show the API call sequence of implementing Video Call.

To implement this logic, take the following steps:

Import the Agora kit.

In ViewController.swift, add the following line after import UIKit:
```
import AgoraRtcKit
```

Initialize the Agora engine.

Each AgoraRtcEngineKit object supports one profile only. If you want to switch to another profile, call destroy to release the current AgoraRtcEngineKit object and then create a new one by calling sharedEngineWithConfig again.

In ViewController.swift, add the following lines after the initView function:
```
func initializeAgoraEngine(){
    let config = AgoraRtcEngineConfig()
    // Pass in your App ID here.
    config.appId = <#Your app Id#>
    // Use AgoraRtcEngineDelegate for the following delegate parameter.
    agoraKit = AgoraRtcEngineKit.sharedEngine(with: config, delegate: self)
}
```

Enable the video module.

In ViewController.swift, add the following lines after the initializeAgoraEngine function:

func setupLocalVideo(){
    // Enables video module
    agoraKit.enableVideo()
    // Starts the local video preview
    agoraKit.startPreview()
    let videoCanvas = AgoraRtcVideoCanvas()
    videoCanvas.uid = 0
    videoCanvas.renderMode = .hidden
    videoCanvas.view = localView
    // Sets the local video view
    agoraKit.setupLocalVideo(videoCanvas)
}

Join the channel with a temp token, channel name, and uid of your project. Configure channel profile and client role type at the same time.

In ViewController.swift, add the following lines after the setupLocalVideo function:

func joinChannel(){
    let option = AgoraRtcChannelMediaOptions()
    // For a live streaming scenario, set the channel profile as liveBroadcasting.
    option.channelProfile = .of((Int32)(AgoraChannelProfile.liveBroadcasting.rawValue))
    // Set the client role as broadcaster or audience.
    option.clientRoleType = .of((Int32)(AgoraClientRole.broadcaster.rawValue))

    // Join the channel with a temp token. Pass in your token and channel name here
   agoraKit.joinChannel(byToken: <#Your token#>, channelId: <#Your channel name#>, uid: 0, mediaOptions: option)
}

Add the remote interface when a remote host joins the channel.

In ViewController.swift, add the following lines after the ViewController class:

extension ViewController: AgoraRtcEngineDelegate{
    func rtcEngine(_ engine: AgoraRtcEngineKit, didJoinedOfUid uid: UInt, elapsed: Int){
        let videoCanvas = AgoraRtcVideoCanvas()
        videoCanvas.uid = uid
        videoCanvas.renderMode = .hidden
        videoCanvas.view = remoteView
        agoraKit.setupRemoteVideo(videoCanvas)
    }
}

Start and stop your app

Now you have created the Video Call functionality. In this implementation, a video call starts when the user opens your app. The video call ends when the user closes your app.

Join the channel after the view is loaded.

In ViewController.swift, add the viewDidLoad function inside the UIViewController function:

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    // Initializes the video view
    initView()
    // The following functions are used when calling Agora APIs
    initializeAgoraEngine()
    setupLocalVideo()
    joinChannel()
}

Leave the channel in order to clean up all resources related to the session.

In ViewController.swift, add the following codes.

If you want to release all resources used by the Agora SDK, call destroy to clean up all the resources you created in initializeAgoraEngine.
```
    agoraKit.stopPreview()
    agoraKit.leaveChannel(nil)
```

Test your app

Please follow the test procedure as shown in the example.

Connect the iOS devices to the computer.
Click the Build button to run your project, and wait a few seconds till the installation completes.
Grant microphone and camera access to your app.
When the app launches, you can see yourself on the local view if you set the client role as broadcaster.
Ask a friend to use a second device to join the channel with the same App ID, token, and channel name. After your friend joins the channel, you can see and hear each other.

Next steps

In a test or production environment, use a token server to generate token is recommended to ensure communication security, see Authenticate Your Users with Tokens for details.

Start a Video Call

Understand the tech

Prerequisites

Project setup

Implement a client for Video Call

Create the UI

Implement the Video Call logic

Start and stop your app

Test your app

Next steps

See also

Sample project

Other approaches to integrate the SDK

Integrate the SDK through Cocoapods

Integrate the SDK manually