Demo to preview the settings
Introduction
The Agora Streaming and Video Conferencing plugin for Bubble allows developers to integrate voice and video communication features into their applications. It supports real-time video and audio streaming, screen sharing, and video conferencing. Users can configure different video profiles, adjust audio settings, and manage participants within a call. The plugin also offers functionalities like recording sessions and real-time user analytics to enhance user experience and engagement.
Prerequisites
You must have an Agora account to interact with agora API and plugin’s elements.
- Create your development account on agora.io.
NOTE: There are certain factors that may 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!
Plugin Tutorial
How to setup
Plugin Element Properties
The plugin contains visual elements that should be used on a page. The primary element is AgoraRTC which replaces the deprecated elements (Agora Connector and Streaming Component).
AgoraRTC
This is the main element used for video conferencing and streaming capabilities.
Attention: Safari 12.1 or earlier doesn't support the “vp8” codec.
Log levels:
- All — outputs all types of API logs.
- Info — outputs the logs related to info, warnings and errors only.
- Warnings — outputs the logs realated to warnings and errors only.
- Error — outputs the logs realated to errors only.
- None — don't output any logs.
Element fields
Title | Description | Type |
Remote Users Group ID | Group where video tracks of remote users will be displayed. | Text |
Codec | Video codec type (vp8, h264). | Dropdown |
Automatic change | Automatically change codec if not supported by device. | Checkbox |
Mode | Set the communication mode (Real Time Call, Stream). | Dropdown |
Role | Role for streaming (Host, Audience). | Dropdown |
Log Level | Set the level of logging (All, Info, Warnings, Error, None). | Dropdown |
Borders | Enable borders around user video frames. | Yes/No |
Borders Radius | Border radius for rounded corners. | Number |
Border style | Style of borders (dotted, dashed, solid, etc.). | Dropdown |
Borders Width (px) | Borders width in pixels. | Number |
Borders Color | Color of borders. | Color |
Column Gap (px) | Distance between columns in pixels. | Number |
Row Gap (px) | Distance between rows in pixels. | Number |
Camera width | Width of camera when both camera and screen sharing is enabled. | Number |
Camera height | Height of camera when both camera and screen sharing is enabled. | Number |
Camera position | Position of camera when both mode is enabled. | Dropdown |
Enable close detection | Enable/disable detection when closing the page. | Checkbox |
Display mode | Sets video display mode (cover, contain, fill). | Dropdown |
Show labels | Yes to show labels. | Yes/No |
Participants | App Type in Database. | App Type (optional) |
UID | Represents UID of user. | Text field of “Participants” type |
Name | Represents Name of user. | Text field of “Participants” type |
Participants source | A list of Participants things from Database, filtered by room name. | List of “Participants”s (optional) |
Padding | Vertical and Horizontal padding. | Text (optional) |
Offset | Label offset in pixels. | Number (optional) |
Border radius | Label border radius in pixels. | Number (optional) |
Background | Label background color. | Color (optional) |
Position | Label's position (Top-Left, Top-Center, etc.). | Dropdown |
Element actions
Join — Allows a user to join a channel or room for video conferencing or streaming.
Leave — Disconnects the user from the current channel or room.
Mute\Unmute — Toggles the user's microphone on or off.
Disable\enable Video — Toggles the user's camera on or off.
Set Camera Settings — Configures camera settings for the video feed.
Set Microphone Settings — Configures microphone settings for audio capture.
Get Number of users — Retrieves the current number of users in the channel.
Mute All — Mutes the audio for all remote users.
Unmute All — Unmutes the audio for all remote users.
Switch Camera — Changes to a different camera device.
Switch Microphone — Changes to a different microphone device.
Microphone Check — Checks if the current microphone is active and functioning.
Camera Check — Checks if the current camera is active and functioning.
Set Region — Sets the geographical region for connection optimization.
Change Screen Quality — Changes the screen sharing quality.
Element events
Note: Events “User joined” and “User left” are triggered only in video conference mode! In stream mode these events are triggered only for the host!
Name | Description |
Joined | Triggered when the user successfully joins a channel or room. |
Agora is not compatible | Triggered when the browser is not compatible with Agora SDK. |
User joined | Triggered when another user joins the channel. |
User left | Triggered when a user leaves the channel. |
Viewer left | Triggered when a viewer leaves the channel. |
Closing | Triggered when the channel is being closed. |
Camera changed | Triggered when the camera device is changed. |
Microphone Changed | Triggered when the microphone device is changed. |
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 texts |
List of microphones | Returns a list of all available device microphones. | List of texts |
remote 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 texts |
Screen Sharing Quality | Shows the current quality of shared screen (resolution, framerate, bitrate). | Text |
Received Video Quality | Shows the quality of received video (resolution, framerate, bitrate). | Text |
Attention: In stream mode, state “remote 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.
API Calls
The plugin provides several API calls for cloud recording and resource management.
Plugin Action Calls
Get resource ID — Retrieves the resource ID necessary for managing recordings.
Start individual cloud recording — Initiates cloud recording for an ongoing stream.
Start individual cloud recording (video only) — Begins cloud recording specifically for video streams.
Start individual cloud recording (audio only) — Initiates cloud recording exclusively for audio streams.
Stop individual cloud recording — Terminates the cloud recording of the ongoing stream.
Query status — Checks the status of the current recording session.
Start composite cloud recording — Start a composite recording that combines multiple streams into one.
Stop composite cloud recording — Stop the composite recording of the combined streams.
Plugin Actions
Generate Agora Token — Generates authentication tokens for Agora channels, allowing secure access to video conferencing and streaming features.
Workflow example
How to set up a Stream
How to set up a Video conference
How to set up Cloud Recording
