Plugins
Templates

Agora Streaming & Video Conferencing (v4.5)

Introduction

Agora.io is on a mission to change the way the world communicates. Agora is known for developing the industry-leading real-time communication framework that serves over 10 billion minutes a month of real-time video, audio, and live interactive broadcasting.

Here is represented the AgoraConnector element based on the New Agora version - V4.5 .

Prerequisites

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

Note: There are certain factors that affect the plugin's workload possibilities such as Bubble application plan, user’s connection bandwidth, type of connection, and Agora limitations related to device and browser / OS version. Please follow Agora's and its plugin's documentation carefully to properly configure the plugin.

How to Setup

Agora API Keys for Streaming Component.

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

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

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

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.

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

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

Agora API Keys for Video Conference.

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

2. Go to Project Management tab and create a new project

3. Fill in the project name in the pop-up and click Submit

Note: Please create a simple APP ID application in the project management dashboard for Video Conference.

4. Get the App ID for your project

Note: The APP ID which is created in Agora dashboard, will be used in version 1.8.0 and above in plugin settings under the Video Calls ID field

5. Paste the App ID in the plugin Settings, in the Video Conference App ID field

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

In order to establish the connection between Application and Agora, please wait up to 10 minutes.

Streaming Component Setup.

  1. Place the Element to the page and set the mode to 'Stream' and role to 'Host'.

2. Place to another page Element and set the mode to 'Stream' and role to 'Audience'.

For the Streaming it's needed to generate a token before starting.

And add this token into the field

Video Conference Setup.

Place the Element to the page, set the mode to Real-time Call, and set a unique id for the remote user group.

Add a group to the page and set its ID Attribute.

AgoraConnector (v4.5) Element Properties.

Since AgoraRTC version 4 and below uses those dependencies that browsers now no longer support, version 4.5+ of the library was released. The new AgoraConnector (v4.5) element works on the latest up-to-date version.

The new version of the library allows using only one element for both streaming and real-time calls.

Fields.

Title

Description

Type

Remote Users Group ID

Group where will be displayed video tracks of remote users.

text

Codec

The codec that the Web browser uses for encoding.

enum

Automatic change

Change automatic supported by the Web browser codec.

yes\no

Mode

Element use mode.

enum

Role

If the mode is "Stream" this field change role of the user.

enum

Log level

Sets the Agora log mode.

enum

Safari 12.1 or earlier does not support the VP8 codec.

About log levels:

DEBUG. Output all API logs.

INFO. Output logs of the INFO, WARNING, and ERROR level.

WARNING. Output logs of the WARNING and ERROR level.

ERROR. Output logs of the ERROR level.

NONE. Do not output any log.

Logs are written to the console.

States.

Title

Description

Type

Connected to room

Indicate if the current user is connected to the room.

yes/no

Video is enabled

Indicate if the current user video is enabled

yes/no

Microphone is enabled

Indicate if the current user microphone is enabled

yes/no

List of cameras

Return list of all available by browser cameras

List of text

List of microphones

Return list of all available by browser microphones

List of text

Number of users

Return number of users in the channel

Number

User Leave Reason

Reason why the user leave the channel

Text

Joined User uid

UID of joined user

Text

Leaved User uid

UID of the leaved user

Text

User UID

Current User UID

Text

Current Used Microphone

Return label of the currently used microphone

Text

Current Used Camera

Return label of the currently used camera

Text

In Streaming Mode Number of users return only the number of hosts.

Possible User Leave Reason values:

  • "Quit": The user calls leave and leaves the channel.

  • "ServerTimeOut": The user has dropped offline.

  • "BecomeAudience": The client role is switched from host to audience.

Events.

Title

Description

Joined

Is triggered when the current user is joined to the channel

Agora is not compatible

Is triggered when the Web browser does not support AgoraRTC

User joined

Is triggered when the user is joined to the channel

User left

Is triggered when the user leaves the channel

User joined and User left triggers only in real-time calls. In Streaming this event is triggered only by the host.

Actions.

  1. Join AgoraConnector(v4.5) action allows connecting the user to RTC or Stream.

Title

Description

Type

Room Name

Name of room there to connect

Text

Enable video

Connect with video

yes/no

Enable audio

Connect with audio

yes/no

Token for streaming

Token generated by API Call for streaming

Text

Screen Sharing

Use screen sharing instead of the camera

yes/no

Screen With Audio

Allow sharing audio with screen sharing (only if supported by the browser)

yes/no

2. Leave AgoraConnector(v4.5) action allows leaving from the currently connected room.

3. Mute/Unmute AgoraConnector (v4.5) action allows disabling/enabling the user's microphone.

4. Disable/Enable Video Agora Connector (v4.5) action allows turning on/off the user's Video.

5. Mute/Unmute All Agora Connector (v4.5) actions allows enabling/disabling microphones of all the interlocutors.

Changelogs

Update: 26/08/2021 – Version: 1.26.0

  • Removed microphone and camera request for audience role of stream

Demo to preview the settings:

Bubble Editor:

Live Demo: