55min

Agora Streaming & Video Conferencing (v4.5)

Repeating Group to CSV

Repeating Group to CSV

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.

How to Setup

Agora API Keys for Streaming Component.

  1. Sign up as a developer: https://docs.agora.io/en
Document image



2. Open the Console (https://console.agora.io), go to the Project Management tab, and create a new project.

Document image



3. In the pop-up window enter your project name and select APP ID + APP Certificate.

Document image



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.

Document image

5. Place App ID and App Certificate in the Bubble > plugins settings tab:

Document image



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
Document image

​2. Go to Project Management tab and create a new project

Document image



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.

Document image



4. Get the App ID for your project

Document image

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

Document image

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'.
Document image

2. Place to another page Element and set the mode to 'Stream' and role to 'Audience'.

Document image

For the Streaming it's needed to generate a token before starting.

Document image

And add this token into the field

Document image

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.

/

Document image

Add a group to the page and set its ID Attribute.

Document image

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.

Document image

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

Document image

3. Mute/Unmute AgoraRTC action allows disabling/enabling the user's microphone.

Document image

4. Disable/Enable Video AgoraRTC action allows turning on/off the user's Video.

Document image

5. Mute/Unmute All AgoraRTC actions allow enabling/disabling microphones of all the interlocutors.

Document image
Document image

6. Set Camera Settings AgoraRTC action allows you to switch and configure the camera before starting a conference or streaming.

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

Document image
  • 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

Document image



9. Switch Camera AgoraRTC allows you to switch the camera by its label during a conference

Document image
  • 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

Document image
  • 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
Added
Update: 22/06/2022 - Version 1.35.0.
Added

Demo to preview the settings