16min

Agora Streaming Component

Introduction

Agora Streaming drives user engagement by quickly building live broadcasting directly to users.

Prerequisites

You must have an account with Agora.IO to interact with the API. Create your development account at: https://docs.agora.io/en

New Agora version - V4.5 has been released. Docs for AgoraConnector element based on version 4.5 please check here: https://docs.zeroqode.com/plugins/agora-streaming-and-video-conferencing.

Agora setup

  1. Sign up as developer: https://docs.agora.io/en
Document image

​ 2. Open the Console (https://console.agora.io) , go to Project Management tab and create new project

Document image



3. In the pop-up window enter your project name and select APP ID + APP Certificate

Document image



Note: Create an APP ID + APP Certificate application in the project management dashboard for Streaming Component.

4. Get the App ID and APP Certificate for your project

Document image



5. Place App ID and App Certificate in the Bubble > plugins settings tab:

Document image

You're all set to use plugin actions, events and states.

Plugin Elements

This plugin comes with Streaming Component visual element which should be used on page

Document image

Element proprieties

Show streamer video - when checked streamer user will see his own video.Video profile - select video quality

Plugin element actions

Join Channel - Joining a streamer channel. Fields: 1. Role - Host (Streamer), Audience (Subscriber) 2. Channel Name 3. Temp Token - A generated token for joining a channel.(Uses Generate Agora Token action)

Recommendation: Do not use parameters from the URL as the name of the channel (room) or part of it.

Leave Channel - Leaving a streamer channel.

Generate Agora Token - Generate a secure token for joining a streaming channel. Fields: 1. Role - Host (Streamer), Audience (Subscriber) 2. Channel Name 3. Privilege Expired - Amount of time in seconds for token validity (in seconds).

Get Devices - lists the available media input and output devices, in our case only cameras.

state: “cameras” - return a list of ids of all cameras installed in the device.



Document image

Plugin Installation

After the plugin setup, for installation follow these steps:

1.Place the Agora Streaming element on the page and configure it as a host

2.Create a page workflow to generate an agora token for joining streaming change on page is loaded for the host

3.After the token was generated next action is to join a channel - use Join channel action (Complete the channel Element, Role , Name, Temp Token) for host user

4.In order to leave the stream, use Leave channel action

5.On a different page place Agora Streaming element on the page an configure it as a audience

6.Create a page workflow to generate an agora token for joining streaming change on page is loaded for the audience

7.After the token was generated next action is to join a channel - use Join channel action (Complete the channel Element, Role , Name, Temp Token) as audience

Disallowed ❌

​❌ to generate Token and set up the Join room action on separate pages or/and workflows. Everything is needed to be configured on the same page. ​

❌ to load a workflow that is used to generate token keys with states. That is if you need to set states, create another workflow, for example, using custom events.​

❌ to generate Token for the Host and audience on the same page.

Changelogs

Update: 13/01/21

  • "Fixed issue with continuing streaming after closing window"

When closing a window (tab) or reloading the page, the A Streaming Component Window Closed event is triggered. Update: 17/03/21 –

  • Added an option to choose the camera if more than one

Update: 25/05/21 -

  • Added to streaming element new calls to separate recording and new exposed state with the client ID

Demo to preview the settings