UI Kit quickstart

Agora UI Kit makes it easy to add Interactive Live Streaming to your app in minutes. UI Kit is an Open Source project that includes best practices for business logic, as well as a pre-built video UI. Every piece is customizable, so the developer has full control over how the video call looks and feels.

This page outlines the minimum code you need to integrate high-quality, low-latency Interactive Live Streaming functionality into your app with a customizable UI.

UI Kit simplifies the implementation of Interactive Live 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 UI Kit, you 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:

• Flutter 2.0.0 or higher

• Dart 2.15.1 or higher

• Android Studio, IntelliJ, VS Code, or any other IDE that supports Flutter, see Set up an editor.

• If your target platform is iOS:

  • Xcode on macOS (latest version recommended)
  • A physical iOS device
  • iOS version 12.0 or later

• If your target platform is Android:

  • Android Studio on macOS or Windows (latest version recommended)
  • An Android emulator or a physical Android device.

• If you are developing a desktop application for Windows, macOS or Linux, make sure your development device meets the Flutter desktop development requirements.

• An Agora account and project.

• A computer with Internet access.

  Ensure that no firewall is blocking your network communication.

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

1. Set up a Flutter environment for a Interactive Live Streaming project

   In the terminal, run the following command:

   flutter doctor
   

   Flutter checks your development device and helps you set up your local development environment. Make sure that your system passes all the checks.

2. Create a new Flutter app

   In the IDE of your choice, create a new project.

   You can also create a new project from the terminal using the command:

   flutter create <--insert project name-->
   

3. Add the Flutter UI Kit package to your project

   Add the following line to pubspec.yaml under dependencies.

   # For x.y.z, fill in a specific SDK version number. For example, 1.0.3
   

   agora_uikit: ^x.y.z
   

   You can get the latest Flutter UI Kit version number from pub.dev.

4. Use the Flutter framework to download dependencies to your app

   Open a terminal window and execute the following command in the project folder:

   flutter pub get
   

5. Add permissions for microphone and camera usage

   If your target platform is iOS, in Xcode, 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.

When a user opens the app, you initialize UI Kit and join a channel. When the user taps the Leave button, the app 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 /lib/main.dart, replace the entire contents of the file with the UI Kit import statements:

In /lib/main.dart, add these variable declarations after the import statements:

When you start the app, you initialize an instance of AgoraClient using AgoraConnectionData.

In /lib/main.dart, add this code framework after the variable declarations:

To implement the UI, add AgoraVideoViewer and AgoraVideoButtons widgets to a build method.

In /lib/main.dart, replace //Build with this custom widget:

/lib/main.dart

import 'package:agora_uikit/agora_uikit.dart';

import 'package:flutter/material.dart';

To ensure that you have implemented Interactive Live 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 /lib/main.dart, update appId, channelName and token with the values for your temporary token.

4. Connect a test device to your development device.

5. In your IDE, click Run app or launch your app from the terminal using flutter run. A moment later you see the project installed on your device.

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

6. Now, you can see yourself on the test device as you have successfully joined the channel as a Host.

7. To join the channel as Audience, edit the AgoraClient object and add a clientRole in the AgoraChannelData class:

   final AgoraClient client = AgoraClient(
   

   agoraConnectionData: AgoraConnectionData(
   

   appId: appId,
   

   channelName: channelName,
   

   tempToken: token,
   

   uid: uid,
   

   ),
   

   agoraChannelData: AgoraChannelData(
   

   channelProfile: ChannelProfile.LiveBroadcasting,
   

   clientRole: ClientRole.Audience,
   

   ),
   

   );
   

8. Relaunch the app. Now you have joined the channel as Audience and you see only the host stream.

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

• UI Kit GitHub repository

• 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.