Agora Streaming & Video Conferencing

Demo to preview the plugin:

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.
The AgoraRTC element is represented here 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.
Image without caption

Plugin Tutorial

Agora Streaming & Video Conference Plugin Tutorial
Agora Streaming & Video Conference Plugin Tutorial

How to Setup

Agora API Keys for Streaming and Video Conference.

  1. Sign up as a developer: https://docs.agora.io/en
Image without caption
2. Open the Console (https://console.agora.io), go to the Project Management tab, and create a new project.
Image without caption
3. In the pop-up window enter your project name and select APP ID + APP Certificate.
Image without caption
Note: Create an APP ID + APP Certificate application in the project management dashboard for Sthe treaming Component. 4. Get the App ID and APP Certificate for your project.
4. Get the App ID and APP Certificate for your project.
Image without caption
5. Place App ID and App Certificate in the Bubble > plugins settings tab:
Image without caption
In order to establish the connection between Application and Agora, please wait up to 10 minutes.
You're all set to use plugin actions, events, and states.

Streaming Component Setup

  1. Place the Element on the page and set the mode to 'Stream' and the role to 'Host'.
Image without caption
2. Place to another page Element and set the mode to 'Stream' and role to 'Audience'.
Image without caption
For the Streaming it's needed to generate a token before starting.
Image without caption
And add this token to the field
Image without caption
🎥 For Agora Cloud Recording for Streaming Component documentation check out the link: https://docs.zeroqode.com/plugins/agora-streaming-and-video-conferencing/agora-cloud-recording-setup
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.
/
Image without caption
Add a group to the page and set its ID Attribute.
Image without caption
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
Image without caption
  • video + screen sharing
Image without caption
  • just screen sharing
Image without caption
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.
🎥 For Agora Cloud Recording for Conference documentation check out the link: https://docs.zeroqode.com/plugins/agora-streaming-and-video-conferencing/agora-cloud-recording-setup

AgoraRTC 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 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.
Image without caption

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
dropdown
Automatic change
Change automatic supported by the Web browser codec.
yes\no
Mode
Element use mode.
dropdown
Role
If the mode is "Stream" this field change role of the user.
dropdown
Log level
Sets the Agora log mode.
dropdown
Remote user group style settings
Borders
Enable borders
yes\no
Borders Radius
Borders Radius
number
Border style
Border style
dropdown
Borders Width (Px)
Borders Width (Px)
number
Borders Color
Borders Color
color
Column Gap (px
Distance between columns
number
Row Gap (px)
Distance between rows
number
Both camera and screen style settings
Camera width
Width in pixels of camera then both mode is enabled
number
Camera heigth
Height in pixels of camera then both mode is enabled
number
Camera position
Camera position
dropdown
Enable close detection
The checkbox allows you to enable/disable the detection to close the page
yes\no
Display mode
Sets video display mode
dropdown
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

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
Viewer left
Is triggered when the viewer leaves the channel
Closing
It is triggered when the session is completed
Camera changed
It is triggered when the camera is changed
Microphone Changed
It is triggered when the microphone is changed
User joined and User left triggers only in real-time calls. In Streaming this event is triggered only by the host.

Actions

  1. Join AgoraRTC action allows the user to connect to RTC or Stream.
Image without caption
Title
Description
Type
Room Name
Name of room there to connect
Text
Enable video
Enable video
Checkbox (yes/no)
Enable audio
Enable audio
Checkbox (yes/no)
Token
The token generated by action “Generate Agora Token” to join the channel
Text (optional)
Screen Sharing
Screen Sharing
Checkbox (yes/no)
Screen With Audio
Screen With Audio
Checkbox (yes/no)
Screen Sharing + Camera
Screen Sharing + Camera
Checkbox (yes/no)
Camera Position
Available options: Top-Left, Top-Right, Bottom-Left, Bottom-Right
Dropdown
Token For Screen+Camera
Token For Screen+Camera
Text (optional)
Camera Width (px)
Camera Width
Number
Camera Height (px)
Camera Height
Number
2. Leave AgoraRTC action allows leaving from the currently connected room.
Image without caption
3. Mute/Unmute AgoraRTC action allows disabling/enabling the user's microphone.
Image without caption
4. Disable/Enable Video AgoraRTC action allows turning on/off the user's Video.
Image without caption
5. Mute/Unmute All AgoraRTC actions allow enabling/disabling microphones of all the interlocutors.
Image without caption
Image without caption
6. Set Camera Settings AgoraRTC action allows you to switch and configure the camera before starting a conference or streaming.
Image without caption
Fields
Title
Description
Type
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.
Text
Optimization mode
Transmission optimization mode. Whether to prioritize video quality or smoothness. Supported only in Chrome Available options: detail, motion
Dropdown (optional)
7. Set Microphone Settings AgoraRTC action allows you to switch and configure the microphone before starting a conference or streaming.
Image without caption
Fields
Title
Description
Type
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.
Text (optional)
Acoustic echo cancellation
Whether to enable acoustic echo cancellation
Checkbox (yes/no)
Audio gain control
Whether to enable audio gain control
Checkbox (yes/no)
Automatic noise suppression
Whether to enable automatic noise suppression
Checkbox (yes/no)
8. Get Number of users AgoraRTC returns the number of users connected to the room
Image without caption
9. Switch Camera AgoraRTC allows you to switch the camera by its label during a conference
Image without caption
Fields
Title
Description
Type
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.
Text
10. Switch Microphone AgoraRTC allows you to switch the microphone by its label during a conference
Image without caption
Fields
Title
Description
Type
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.
Text
11. Set Region - Sets the region for connection.
Image without caption
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

Plugin Action Calls

Get resource ID
Start individual cloud recording
Stop individual cloud recording
Query status
Start individual cloud recording (video only)
Start individual cloud recording (audio only)
Start composite cloud recording
Stop composite cloud recording

Plugin Actions

  1. Generate Agora Token - generates a token to connect to the channel
    1. Title
      Description
      Type
      Mode
      Available options: Real Time Call, Stream
      Dropdown (optional)
      Role
      Available options: Host, Audience
      Dropdown
      Channel Name
      Name of room there to connect
      Text
      Privilege Expired
      Token expiration time in seconds
      Number
Return Values:
Title
Description
Type
Agora Temp Token
Agora Temp Token
Text
Token for Both Screen and Camera
Token for Both Screen and Camera
Text
UID
UID
Text
  1. Generate Recording Token - generates a token for recording
    1. Title
      Description
      Type
      Mode
      Available options: Real Time Call, Stream
      Dropdown (optional)
      Channel Name
      Name of room there to connect
      Text
      Expire IN
      Token expiration time in seconds
      Number
      UID
      The unique ID that contains only digits. Can be used a value in the range from 1 to 4294967295.
      Text
Return Values:
Title
Description
Type
Agora recording token
Agora recording token
Text
UID
UID
Text
Image without caption

Changelogs