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 AgoraRTC 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.
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.
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.
2. Go to the 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 field5. Paste the App ID in the plugin Settings, in the Video Conference App 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
Place the Element on 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.
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.
Add a button on the page to start a real-time call, use the “Join Room” plugin action. There might be a few setup variants of this button:
just a video
video + screen sharing
just screen sharing
Note, you can not switch from video only to video + screen sharing during a call. You need to stop the current conference and initiate a new one with the appropriate action setup.
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 AgoraRTC 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
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)
❗
Note: 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.
Element States
Title
Description
Type
Connected to room
Indicates if the current user is connected to the room.
yes/no
Video is enabled
Indicates if the current user video is enabled.
yes/no
Microphone is enabled
Indicates if the current user microphone is enabled.
yes/no
List of cameras
Returns the list of all available device cameras.
list of text
List of microphones
Returns a list of all available device microphones.
list of text
Number of users
Returns the number of users in the channel.
number
User Leave Reason
Returns the reason why the user leaves the channel.
text
Joined User UID
Returns the UID of the last joined user.
text
Leaved User UID
Returns the UID of the last leaved user.
text
User UID
Returns the UID of the current user.
text
Current Used Microphone
Returns the label of the currently used microphone.
text
Current Used Camera
Returns the label of the currently used camera.
text
Channel closed
Indicates if the channel is closed.
text
Microphone Check
Indicates if the current user microphone is active.
yes/no
Camera Check
Indicates if the current user camera is active.
yes/no
duration
Returns the duration of the user into the call in seconds.
number
available regions
Returns the list of available areas of connection.
list of text
⚠️
In Streaming Mode, the Number of users returns 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
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
Join AgoraRTC action allows connecting the user to RTC or Stream.
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 AgoraRTC action allows leaving from the currently connected room.
3. Mute/Unmute AgoraRTC action allows disabling/enabling the user's microphone.
4. Disable/Enable Video AgoraRTC action allows turning on/off the user's Video.
5. Mute/Unmute All AgoraRTC actions allow enabling/disabling microphones of all the interlocutors.
6. Set Camera Settings AgoraRTC action allows you to switch and configure the camera before starting a conference or streaming.
Camera Label - The label of the camera you want to use. The list of labels can be found in state "List of cameras" exposed by plugin element.
Optimization mode - You can choose whether to prioritize video quality or smoothness: "detail": Prioritizes video quality; "motion": Prioritizes video smoothness.
7. Set Microphone Settings AgoraRTC action allows you to switch and configure the microphone before starting a conference or streaming.
Microphone Label - The label of the microphone you want to use. The list of labels can be found in state "List of microphones" exposed by plugin element.
Acoustic echo cancellation - Whether to enable acoustic echo cancellation
Audio gain control - Whether to enable audio gain control
Automatic noise suppression - Whether to enable automatic noise suppression
8. Get Number of users AgoraRTC returns the number of users connected to the room
9. Switch Camera AgoraRTC allows you to switch the camera by its label during a conference
Camera - The label of the camera you want to use. The list of labels can be found in state "List of cameras" exposed by plugin element.
10. Switch Microphone AgoraRTC allows you to switch the microphone by its label during a conference
Microphone - The label of the microphone you want to use. The list of labels can be found in state "List of microphones" exposed by plugin element.
11. Set Region - Sets the region for connection.
Fields:
Title
Description
Type
Region
Specifies only one region for connection. Insert one of the regions from the "available regions" state.
text
Excluded Region
Set the "Region" to specify a large region and the "Excluded Region" to specify a small region. The region for connection is the large region excluding the small region. You can only specify the large region as "GLOBAL".
text
Changelogs
Update: 26/08/2021 – Version: 1.26.0
Removed microphone and camera request for audience role of stream
Update: 05/05/2022 – Version: 1.33.0
added - possibility to record real time calls.
added - an action that generates a token for cloud recording.
Update: 22/06/2022 - Version 1.35.0.
added - possibility to enable microphone using "mute/unmute" action
Update: 14/12/2022 - Version 1.41.0.
added - multi-streaming possibility
Update: 01/03/2023 - Version 1.46.0
Updated Agora library
Update: 05/09/2023 - Version 1.49.0
Updated to the new responsive
Update 26/12/23 - Version 1.55.0
Fixed "group containing the users"
Update 15/02/24 - Version 1.58.0
Added "duration" state.
Update 20.02.24 - Version 1.59.0
Added the possibility to set the region of connection.
Added new state “available regions”.
Added the new action “Set Region” for the element “AgoraRTC”.
