Start Interactive Live Streaming

Agora’s Interactive Live Streaming 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 for Windows.

Understand the tech

The following figure shows the workflow you need to integrate into your app in order to achieve Interactive Live Streaming functionality.

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

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

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

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

• Microsoft Visual Studio 2017 or later
• A Windows device running Windows 7 or later
• C++ 11 or higher
• A valid Agora account. (Sign up for free)
• 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.

Project setup

In order to create the environment necessary to integrate Interactive Live Streaming into your app, do the following:

Create a Windows project

See Create a C++ console app project to create a C++ console app on Visual Studio.

Integrate the SDK

Follow these steps to integrate the Agora Video SDK into your project.

1. Go to SDK Downloads, download the latest version of the Agora SDK, and unzip the downloaded SDK package.
2. Copy the x86 or x86_64 folder of the downloaded SDK package to your project files according to your development environment.

Configure the project properties

Right-click the project name in the Solution Explorer window, click Properties to configure the following project properties, and click OK.

• Go to the C/C++ > General > Additional Include Directories menu, click Edit, and input $(SolutionDir)include in the pop-up window.

• Go to the Linker > General > Additional Library Directories menu, click Edit, and input $(SolutionDir) in the pop-up window.

• Go to the Linker > Input > Additional Dependencies menu, click Edit, and input agora_rtc_sdk.dll.lib in the pop-up window.

Implement a client for Interactive Live Streaming Premium

This section introduces how to use the Agora SDK to start the interactive live video streaming. The following figure shows the API call sequence of the interactive live video streaming.

1. Create the UI

   Create the user interface (UI) for the interactive video streaming in your project. Skip to Initialize IRtcEngine if you already have an UI in your project.

   If you are implementing the interactive video streaming, we recommend adding the following elements into the UI:

   • The view of the host
   • The exit button

   When you use the UI setting of the sample project, you can see the following interface:

   

2. Initialize IRtcEngine

   Create and initialize the IRtcEngine object before calling any other Agora APIs.

   Call the createAgoraRtcEngine method and the initialize method, and pass in the App ID to initialize the IRtcEngine object.

   You can also listen for callback events, such as when the local user joins or leaves the channel.

   // Create Rtc engine.
   m_lpAgoraEngine = createAgoraRtcEngine();
   RtcEngineContext ctx;
   
   // Add the register events and callbacks.
   ctx.eventHandler = &m_engineEventHandler;
   
   // Input your App ID.Fill the App ID of your project generated on Agora Console.
   ctx.appId = "Your App ID";
   
   // Initialize the IRtcEngine object.
   m_lpAgoraEngine->initialize(ctx);

   // Inherit the events and callbacks of IRtcEngineEventHandler.
   class CAGEngineEventHandler :
       public IRtcEngineEventHandler
   {
   public:
       CAGEngineEventHandler();
       ~CAGEngineEventHandler();
       void setMainWnd(HWND wnd);
       HWND GetMsgReceiver() {return m_hMainWnd;};
   
       // Listen for the onJoinChannelSuccess callback.
       // This callback occurs when the local user successfully joins the channel.
       virtual void onJoinChannelSuccess(const char* channel, uid_t uid, int elapsed);
   
       // Listen for the onLeaveChannel callback.
       // This callback occurs when the local user successfully leaves the channel.
       virtual void onLeaveChannel(const RtcStats& stat);
   
       // Listen for the onUserJoined callback.
       // This callback occurs when the remote host successfully joins the channel.
       // After receiving this callback, immediately call setupRemoteVideo to set the remote video view.
       virtual void onUserJoined(uid_t uid, int elapsed) override;
   
       // Listen for the onUserOffline callback.
       // This callback occurs when the remote host leaves the channel or drops offline.
       virtual void onUserOffline(uid_t uid, USER_OFFLINE_REASON_TYPE reason);
   private:
       HWND m_hMainWnd;
   };

3. Set the local video view

   After setting the channel profile and client role, set the local video view before joining the channel so that the host can see the local video in the interactive streaming. Follow these steps to configure the local video view:

   // Enable the video module.
   m_lpAgoraEngine->enableVideo();
   // Start local preview.
   m_lprtcEngine->startPreview();
   
   // Set the local video view.
   VideoCanvas vc;
   vc.uid = 0;
   vc.view = hVideoWnd;
   vc.renderMode = RENDER_MODE_TYPE::RENDER_MODE_HIDDEN;
   m_lpAgoraEngine->setupLocalVideo(vc);

4. Join the channel

   Set channel profile and client role and join the channel by a temp token.

    void CLiveBroadcastingDlg::OnBnClickedButtonJoinchannel()
   {
    if (!m_rtcEngine || !m_initialize)
        return;
    CString strInfo;
    if (!m_joinChannel) {
        CString strChannelName;
        m_edtChannelName.GetWindowText(strChannelName);
        if (strChannelName.IsEmpty()) {
            AfxMessageBox(_T("Fill channel name first"));
            return;
        }
   
        VideoEncoderConfiguration config;
        if (m_cmbVideoEncoder.GetCurSel() < 3)
            config.codecType = (VIDEO_CODEC_TYPE)(m_cmbVideoEncoder.GetCurSel() + 1);
        else
            config.codecType = (VIDEO_CODEC_TYPE)(m_cmbVideoEncoder.GetCurSel() + 2);
        m_rtcEngine->setVideoEncoderConfiguration(config);
        std::string szChannelId = cs2utf8(strChannelName);
   
        ChannelMediaOptions options;
        // Set the channel profile as BROADCASTING.
        options.channelProfile = CHANNEL_PROFILE_LIVE_BROADCASTING;
        // Set the client role as BROADCASTER or AUDIENCE according to the scenario.
        options.clientRoleType = CLIENT_ROLE_TYPE(m_cmbRole.GetCurSel() + 1);
        options.autoSubscribeAudio = true;
        options.autoSubscribeVideo = true;
        // Join channel with a temp token that you generate on Agora Console.
        if (0 == m_rtcEngine->joinChannel(APP_TOKEN, szChannelId.c_str(), 0, options)) {
            strInfo.Format(_T("join channel %s, use ChannelMediaOptions"), getCurrentTime());
            m_btnJoinChannel.EnableWindow(FALSE);
        }
    }
    else {
        if (0 == m_rtcEngine->leaveChannel()) {
            strInfo.Format(_T("leave channel %s"), getCurrentTime());
            m_btnJoinChannel.EnableWindow(FALSE);
        }
    }
   
    m_lstInfo.InsertString(m_lstInfo.GetCount(), strInfo);
   }

5. Set the remote video view

   In the interactive video streaming, you should also be able to see all the hosts, regardless of your role. This is achieved by calling the setupRemoteVideo method after joining the channel.

   Shortly after a remote host joins the channel, the SDK gets the host's user ID in the onUserJoined callback. Call the setupRemoteVideo method in the callback and pass in the uid to set the video view of the host.

   // Listen for the onUserJoined callback.
   // After receiving this callback, immediately call setupRemoteVideo to set the remote video view.
   void CAGEngineEventHandler::onUserJoined(uid_t uid, int elapsed)
   {
       LPAGE_USER_JOINED lpData = new AGE_USER_JOINED;
   
       lpData->uid = uid;
       lpData->elapsed = elapsed;
   
       if(m_hMainWnd != NULL)
           ::PostMessage(m_hMainWnd, WM_MSGID(EID_USER_JOINED), (WPARAM)lpData, 0);
   }

   VideoCanvas canvas;
   canvas.renderMode = RENDER_MODE_FIT;
   POSITION pos = m_listWndInfo.GetHeadPosition();
   ......
   AGVIDEO_WNDINFO &agvWndInfo = m_listWndInfo.GetNext(pos);
   canvas.uid = agvWndInfo.nUID;
   canvas.view = m_wndVideo[nIndex].GetSafeHwnd();
   agvWndInfo.nIndex = nIndex;
   
   // Set the remote video view.
   CAgoraObject::GetEngine()->setupRemoteVideo(canvas);

6. Leave the channel

   Call the leaveChannel method to leave the current channel according to your scenario, for example, when the interactive streaming ends, when you need to close the app, or when your app runs in the background.

   void CLiveBroadcastingDlg::UnInitAgora()
   {
    if (m_rtcEngine) {
        if(m_joinChannel)
        // Leave the current channel.
        m_rtcEngine->leaveChannel();
        m_lstInfo.InsertString(m_lstInfo.GetCount(), _T("leaveChannel"));
        // Stop local preview.
        m_rtcEngine->stopPreview();
        m_lstInfo.InsertString(m_lstInfo.GetCount(), _T("stopPreview"));
        // Disable video module.
        m_rtcEngine->disableVideo();
        m_lstInfo.InsertString(m_lstInfo.GetCount(), _T("disableVideo"));
        // Release the IRtcEngine object.
        m_rtcEngine->release(true);
        m_lstInfo.InsertString(m_lstInfo.GetCount(), _T("release rtc engine"));
        m_rtcEngine = NULL;
    }
   }

Test your app

Run the project on your Windows device. When you set the role as the host and successfully start the interactive video streaming, you can see the video view of yourself in the app. When you set the role as the audience and successfully join the interactive video streaming, you can see the video view of the host in the app.

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.

See also

This section provides additional information for your reference.

Sample project

Agora provides an open source interactive live broadcast example project API Example on GitHub for your reference.

Listening for audience events

The Agora Video SDK does not report events of an audience member in a live streaming channel. Refer to How can I listen for an audience joining or leaving an interactive live streaming channel? if your scenario requires so.