

Voice Call v4.0.0 Beta





Start Interactive Live Streaming

Last updated 2022/09/27 02:06:55

Agora’s Interactive Live Streaming Premium makes it easy for you to build apps with audio and video streaming that encourage real-time exchanges, creating deeper connections and driving revenue opportunities.

This page shows the minimum code you need to integrate high-quality, low-latency Interactive Live Streaming 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 Interactive Live Streaming Premium functionality.

To start Interactive Live Streaming Premium, implement the following steps in your app:

Set the role

Users in an Interactive Live Streaming Premium channel are either a host or an audience member. The host publishes streams to the channel, and the audience subscribes to the streams.
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.
Publish and subscribe to audio and video in the channel

After joining a channel, a host can publish audio and video and subscribe other hosts in the channel.
Subscribe to audio and video in the channel

The role of audience can only subscribe to all hosts in the channel, you can call setClientRole to switch the client role to host.

Prerequisites

Xcode 12.0 or later.
Two macOS devices running macOS 10.10 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 Interactive Live Streaming Premium into your app, do the following in Xcode:

Create a new project for a macOS 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 macOS 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.

Navigate to TARGETS > Project Name > Signing & Capabilities, and add the following permissions in App Sandbox and Hardened Runtime:

Capability	Category	Permission
App Sandbox	Network	Incoming Connections (Server) Outgoing Connections (Client)
App Sandbox	Hardware	Camera Audio Input
Hardened Runtime	Resource Access	Camera Audio Input

If you need to add a third-party plug-in or library (such as a third-party camera), and the signing of the third-party plug-in or library is different from your project, you need to navigate to Hardened Runtime > Runtime Exceptions, and check the Disable Library Validation option.
See more considerations in Preparing Your App for Distribution.

Integrate the Video SDK into your project.

Ensure that you have installed CocoaPods before the following steps. If it is not installed, you can refer to Getting Started with CocoaPods to install Cocoapods to this machine.
1. Enter the project root directory in Terminal and run the pod init command, after which you can find the Podfile under the project directory.
2. Open the Podfile and modify it by referring to the code below. Remember to changeYour App to the target name of your project.
```
platform :macos, '10.11'
target 'Your App' do
    // For version, fill in a specific SDK version number. For example, 4.0.0.4
    pod 'AgoraRtcEngine_macOS', 'version'
end
```
1. Run the pod install command in the Terminal to install the Agora SDK. Once you successfully install the SDK, it shows Pod installation complete!
2. A new file with a suffix of .xcworkspace is generated under the project folder. Use Xcode to open it for subsequent operations.
For more integration methods, see Other approaches to integrating the SDK.

Implement a client for Interactive Live Streaming Premium

This section shows how to use the Agora Video SDK to implement Interactive Live Streaming Premium into your app step by step.

Create the UI

When creating the user interface for basic live video streaming, 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 AppKit
class ViewController: NSViewController{
    ...
    // Defines localView
    var localView: NSView!
    // Defines remoteView
    var remoteView: NSView!
    // 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 = NSView()
        self.view.addSubview(remoteView)
        // Initializes the local video window. This view displays video when the local user is a host.
        localView = NSView()
        self.view.addSubview(localView)
    }
}

Implement the Interactive Live Streaming Premium logic

The following figure shows the API call sequence of implementing Interactive Live Streaming Premium.

To implement this logic, take the following steps:

Import the Agora kit.

In ViewController.swift, add the following line after import AppKit:
```
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 Interactive Live Streaming Premium functionality. In this implementation, a live stream starts when the user opens your app. The live stream ends when the user closes your app.

Join the channel after the view is loaded.

In ViewController.swift, add the viewDidLoad function inside the NSViewController 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

Take the following steps to test your app.

Connect the macOS devices to the computer.
In Xcode 12.2 or later, to avoid compliation errors, you need to navigate to TARGETS > Project Name > Build Settings > Architectures, and set the Architectures property to x86_64 before the compilation.
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. If your friend joins as a host, you can see and hear each other; if as an audience member, you can only see yourself while your friend can see and hear you.

Next steps

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

Start Interactive Live Streaming

Understand the tech

Prerequisites

Project setup

Implement a client for Interactive Live Streaming Premium

Create the UI

Implement the Interactive Live Streaming Premium logic

Start and stop your app

Test your app

Next steps

See also

Sample project

Other approaches to integrate the SDK

Integrate the SDK manually

Listening for audience events