UI Kit quickstart

The fastest and easiest way to get started with Agora Broadcast Streaming is to use the UI Kit. It implements commonly-used features and flows to get you up and running in minutes. This open source project includes best practices for business logic, as well as a pre-built UI that is highly customizable.

This page outlines the minimum code you need to integrate high-quality, low-latency Broadcast Streaming functionality into your app using the UI Kit.

UI Kit simplifies the implementation of Broadcast Streaming by handling common calling logic such as remote user status, and displaying it in a pre-built customizable UI. UI Kit contains the following components:

To use the UI Kit, implement the following steps in your app:

1. Create an instance of the viewer

   Declare and initialize an instance of the UI Kit viewer.

2. Join a channel

   When you execute the join command, your app joins the channel, publishes the local audio and video streams to Agora SD-RTN™, and handles audio and video for anyone else who joins the call in a default UI.

   Yes, you read that right. After initializing a viewer instance, you can create or join a channel with just one line of code.

To follow this procedure you must have:

• Xcode 13.0 or higher.
• An Apple developer account.
• If you need to use CocoaPods integrated SDK, make sure CocoaPods is installed.
• Two devices running macOS 10.10 or higher.

• A computer with Internet access. If a firewall is deployed in your network environment, refer to Connect through restricted networks with Cloud Proxy to use Agora services normally.

• A camera and a microphone

• A valid Agora account and project

To integrate Broadcast Streaming into your app using UI Kit, do the following:

1. Create a new project using the App template. Select the Storyboard Interface and Swift language.

   If you have not already added team information, click Add account…, input your Apple ID, then click Next.

2. Enable automatic signing for your project.

3. Add project permissions for microphone and camera usage:

   1. Open Info in the project navigation panel, then add the following properties to the Information Property List:

      Key	Type	Value
      NSMicrophoneUsageDescription	String	Access the microphone.
      NSCameraUsageDescription	String	Access the camera.

   2. Add sandbox and runtime capabilities to your project:

      Open the target for your project in the project navigation properties, then add the following capabilities in Signing & Capabilities.

      • App Sandbox:
        • Incoming Connections (Server)
        • Outgoing Connections (Client)
        • Camera
        • Audio Input
      • Hardened Runtime:
        • Camera
        • Audio Input

4. Integrate UI Kit into your project.

   1. In Xcode, click File > Add Packages, then paste the following link in the search:

      https://github.com/AgoraIO-Community/VideoUIKit-macOS.git
      

      You see the AgoraUIKit package. Choose the latest version.

   2. Click Add Package. In Choose Package Products, select AgoraRtmControl and AgoraUIKit, then click Add Package.

      You see AgoraUIKit, AgoraRtmKit, and AgoraRtcKit in the Package Dependencies for your project.

When a user opens the app, you initialize UI Kit. When the user taps a button, the app joins or leaves a channel. When another user joins the same channel, their video and audio is rendered in the app. This simple workflow enables you to concentrate on implementing Agora features and not UX bells and whistles.

To integrate real-time video with a ready-made user interface into your app using UI Kit:

In ViewController, add the UI Kit libraries after import Cocoa:

If Xcode does not recognize this import, click File > Packages > Reset Package Caches.

In ViewController, add the provided code sample after class ViewController: NSViewController {:

In ViewController, add the provided code sample after var agoraView: AgoraVideoViewer!:

When the view is loaded, call initializeAndJoinChannel to join a channel. When the user leaves the channel, clean up all the resources used by your app. In ViewController, replace the viewDidLoad function with the following code:

ViewController

import AgoraUIKit

import AgoraRtcKit

To ensure that you have implemented Broadcast Streaming in your app:

1. Generate a temporary token in Agora Console

2. In your browser, navigate to the Agora web demo and update App ID, Channel, and Token with the values for your temporary token, then click Join.

3. In Xcode, in ViewController, update appID, channelName and token with the values for your temporary token.

4. Click Run, then wait a few seconds until the installation is complete.

   If this is the first time you run the project, grant microphone and camera access to your app.

You are in the channel:

This section contains content that completes the information on this page, or points you to documentation that explains other aspects to this product.

To implement token authentication when using the UI Kit, refer to the following steps:

1. Set the URL of the server your app retrieves tokens from

   In ViewController, declare the following variable to hold the token server URL:

   // The base URL to your token server. For example, https://agora-token-service-production-92ff.up.railway.app"
   

   var serverUrl = "<#Token Server URL#>"
   

   Make sure you specify the token-server URL in exactly the same format as shown in the example.

2. Set the token URL for the AgoraVideoViewer

   To set the token URL, you create an AgoraSettings object, set its tokenURL property, and pass this object as the agoraSettings parameter to the initializer when initializing the AgoraVideoViewer. To do this, replace the agoraView = AgoraVideoViewer(… line of the initializeAndJoinChannel() method with the following:

   var settings = AgoraSettings()
   

   settings.tokenURL = serverUrl
   

   agoraView = AgoraVideoViewer(
   

   connectionData: AgoraConnectionData(
   

   appId: appId,
   

   rtcToken: token
   

   ),
   

   agoraSettings: settings
   

   )
   

Agora UI Kit automatically fetches a token from the token server at serverUrl.

• See the Open Source UI Kit projects on GitHub here.

• Downloads shows you how to install Video SDK manually.

• To ensure communication security in a test or production environment, use a token server to generate token is recommended to ensure communication security, see Implement the authentication workflow.

Since UI Kit is a drop-in solution, it has customization limits that might not meet all your needs. If you want to change the UI or add more features, fork the open-source GitHub repository and build your own version. For substantially different scenarios and UI implementations, implement your own solution by following the SDK Quickstart guide.