How to Build a Live Video Streaming iOS App with Agora 4.x Preview
Tags: ios, agora, video
Published: 2021-09-17 15:04:29

Recording and streaming a live feed from your app can be difficult, especially if you want to reach a global audience with little to no latency. The Agora Voice and Video SDK is perfect for reliably sending low-latency messages to a global audience, where you can have one or more people streaming their feeds.

## Introduction

In this tutorial, you learn how to create an application that enables users to be either a streamer or an audience member in a session using Agora’s newest SDK version, `4.0.0`. The setup is very similar to creating a video call with Agora, with a slight difference of roles: audience and broadcaster.

## Prerequisites

- An Agora developer account (see [How To Get Started with Agora](https://www.agora.io/en/blog/how-to-get-started-with-agora?utm_source=medium&utm_medium=blog&utm_campaign=live-broadcasting-app-agora-ios))
- Xcode 12.0 or later
- iOS device with iOS 13.0 or later (as this project uses SF Symbols)
- A basic understanding of iOS development

> *Note: If you need to target an earlier version of iOS, you can change how the buttons are created in the provided* [*example project*](https://github.com/AgoraIO-Community/Agora-iOS-Swift-Example/tree/ng-sdk-update)*.*

## Setup

Let’s start with a new, single-view iOS project. Create the project in Xcode, and then add Agora’s 4.0.0 Preview Swift Package.

Add the package by opening selecting `File > Swift Packages > Add Package Dependency`, then paste in the link to this Swift Package:

```
https://github.com/agorabuilder/AgoraRtcEngine_iOS_Preview.git
```

At the time post is written, the latest release is `4.0.0`.

If you want to jump ahead, you can find the full example project here on branch `ng-sdk-update`:

https://github.com/AgoraIO-Community/Agora-iOS-Swift-Example/tree/ng-sdk-update

## Create the App

In this initial UIViewController, we can just have a button in the center to join the channel. This button will tell the application to open a view on top, enabling us to join as an audience member by default.

{% gist https://gist.github.com/maxxfrazer/d1168facd3b303a4e648c6a24b844d74 %}

The view in this example is very basic, as you can see:

![img](https://cdn-images-1.medium.com/max/800/0*yWG0DFdt1TW1rwIV.png)

Next, create the ChannelViewController.swift file. This file will contain our UIViewController subclass called ChannelViewController, which displays the Agora pieces. In it, we will store values such as App ID, token, and channel name for connecting to the service, and add a button to change the user role between audience (default) and broadcaster. Also, initialise the Agora Engine with the correct client role. I have also preemptively added `remoteUserIDs` and `userVideoLookup`, which will keep track of the broadcasters/streamers.

{% gist https://gist.github.com/maxxfrazer/17188e7c8c38c550e29945f9ec964934 %}

When `userVideoLookup` is set or updated, `reorganiseVideos` is called to organise all of the streamed video feeds into a grid formation. Of course, a grid formation is not required, but if you want to implement the same thing, the `reorganiseVideos` method is provided in the example project. Here’s a link to it:

https://github.com/AgoraIO-Community/Agora-iOS-Swift-Example/blob/aebfd5c6fd6159c85906952acc9e1b2e9aaec117/Agora-iOS-Example/ChannelViewController%2BVideoControl.swift#L109

The hostButton has a target set as `toggleBroadcast`. This method is found right at the bottom of the gist. As you can see, it toggles the value of `self.userRole` between `.broadcaster` and `.audience`, and then sets the client role using `setClientRole`. When the local client starts streaming, additional buttons should appear (for audio and video settings). But those buttons are displayed only after the client role has been changed, which is signaled by the delegate callback.

In the gist above, the ChannelViewController is set as the `AgoraRtcEngineDelegate`, so we should add that protocol to our class, along with some callback methods.

The main callback methods we need for a basic streaming session are [didJoinedOfUid](https://docs.agora.io/en/voice/API Reference/oc/v2.8.0/Protocols/AgoraRtcEngineDelegate.html#//api/name/rtcEngine:didJoinedOfUid:elapsed:), [didOfflineOfUid](https://docs.agora.io/en/voice/API Reference/oc/v2.8.0/Protocols/AgoraRtcEngineDelegate.html#//api/name/rtcEngine:didOfflineOfUid:reason:), [didClientRoleChanged](https://docs.agora.io/en/voice/API Reference/oc/v2.8.0/Protocols/AgoraRtcEngineDelegate.html#//api/name/rtcEngine:didClientRoleChanged:newRole:), and [firstRemoteVideoDecodedOfUid](https://docs.agora.io/en/voice/API Reference/oc/v2.8.0/Protocols/AgoraRtcEngineDelegate.html#//api/name/rtcEngine:firstRemoteVideoDecodedOfUid:size:elapsed:).

{% gist https://gist.github.com/maxxfrazer/b90f8917cb764e9f1e7573e1b1c7fe75 %}

As mentioned in the gist, the [didClientRoleChanged](https://docs.agora.io/en/voice/API Reference/oc/v2.8.0/Protocols/AgoraRtcEngineDelegate.html#//api/name/rtcEngine:didClientRoleChanged:newRole:) is the callback for when we have changed the local user role to broadcaster or audience member.

If a remote host is streaming to us, the nonhosting view should now look like this:

![img](https://cdn-images-1.medium.com/max/800/0*LhNI59wgEo469G7E.png)

When the user is streaming, they should have additional options, including the ability to switch between the device’s front- and back-facing cameras and turning the camera or microphone on and off. In this case, a beautification toggle is added. To show and hide these options, the `isHidden` property of the button container is set to false or true, respectively.

![img](https://cdn-images-1.medium.com/max/800/0*MTb9t4aK5VlkDr4Y.png)

In your application you may not want anyone to be able to start streaming. You could easily achieve this by requiring a password in the app (a static password or one authorised by a network request). Or you could offer separate apps for hosts and audience members.

## Other Resources

For more information about building applications using Agora.io SDKs, take a look at the [Agora Video Call Quickstart Guide](https://docs.agora.io/en/Video/start_call_ios?platform=iOS&utm_source=medium&utm_medium=blog&utm_campaign=real-time-messaging-video-dynamic-channels) and [Agora API Reference](https://docs.agora.io/en/Video/API Reference/oc/docs/headers/Agora-Objective-C-API-Overview.html?utm_source=medium&utm_medium=blog&utm_campaign=real-time-messaging-video-dynamic-channels).

I also invite you to [join the Agora.io Developer Slack community](https://www.agora.io/en/join-slack/).