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. 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. 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. 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
Recommendation: Do not use parameters from the URL as the name of the channel (room) or part of it.

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

Last modified 1mo ago