Agora Streaming & Video Conferencing

Demo to preview the settings

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

Plugin Tutorial

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

How to Setup

Agora API Keys for Streaming Component.

  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 Streaming 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
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
Image without caption
2. Go to the Project Management tab and create a new project
Image without caption
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.
Image without caption
4. Get the App ID for your project
Image without caption
❗
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
Image without caption
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 on the page and set the mode to 'Stream' and 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 into 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

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

States

  • Connected to the 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 browser cameras. (List of text)
  • List of microphones - Return a list of all available browser microphones. (List of text)
  • Number of users - Return the number of users in the channel. (Number)
  • User Leave Reason - Reason why the user leaves 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 the label of the currently used microphone. (Text)
  • Current Used Camera - Return the 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

  • 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 AgoraRTC action allows connecting the user to RTC or Stream.
Image without caption
  • 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.
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
  • 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.
Image without caption
  • 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
Image without caption
9. Switch Camera AgoraRTC allows you to switch the camera by its label during a conference
Image without caption
  • 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
Image without caption
  • 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.

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

Demo to preview the settings

Agora Cloud Recording Setup