logo
Zeroqode Docs
/
Plugins

Agora Streaming & Video Conferencing

✅
Link to plugin page: https://zeroqode.com/plugin/agora-streaming--video-conferencing-plugin-for-bubble--1569252528377x662238049686155900

Demo to preview the plugin:

✅
Live Demo: https://zeroqode-demo-19.bubbleapps.io/agora_rtc
✅
Bubble Editor: https://bubble.io/page?version=live&name=agora_rtc&id=zeroqode-demo-19&tab=tabs-1&type=page

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

Plugin Tutorial

Agora Streaming & Video Conference Plugin Tutorial
https://www.youtube.com/playlist?list=PLCXsjZf1gLSJJGYBnLI0gbLt97AdYDu4n
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.

Element States

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

Changelogs

Advanced Rarible NFT Protocol
Air Chat & Messaging Pro Plugin
Powered by Notaku
Share
Content
Agora Streaming & Video Conferencing
Demo to preview the plugin:
Introduction
Prerequisites
Plugin Tutorial
How to Setup
Agora API Keys for Streaming Component.
Agora API Keys for Video Conference
Streaming Component Setup
Video Conference Setup
AgoraRTC Element Properties
Fields
Element States
Events
Actions
Changelogs