Link to plugin page: https://zeroqode.com/plugin/agora-streaming--video-conferencing-plugin-for-bubble--1569252528377x662238049686155900
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
https://www.youtube.com/playlist?list=PLCXsjZf1gLSJJGYBnLI0gbLt97AdYDu4n
How to Setup
Agora API Keys for Streaming Component.
- Sign up as a developer: https://docs.agora.io/en
2. Open the Console (https://console.agora.io), go to the Project Management tab, and create a new project.
3. In the pop-up window enter your project name and select APP ID + APP Certificate.
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.
5. Place App ID and App Certificate in the Bubble > plugins settings tab:
You're all set to use plugin actions, events, and states.
Agora API Keys for Video Conference
- Sign up as a developer: https://docs.agora.io/en
2. Go to the Project Management tab and create a new project
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.
4. Get the App ID for your project
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
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
- Place the Element on the page and set the mode to 'Stream' and role to 'Host'.
2. Place to another page Element and set the mode to 'Stream' and role to 'Audience'.
For the Streaming it's needed to generate a token before starting.
And add this token into the field
🎥 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.
/
Add a group to the page and set its ID Attribute.
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
- video + screen sharing
- just screen sharing
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.
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
- Join AgoraRTC action allows connecting the user to RTC or Stream.
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.
3. Mute/Unmute AgoraRTC action allows disabling/enabling the user's microphone.
4. Disable/Enable Video AgoraRTC action allows turning on/off the user's Video.
5. Mute/Unmute All AgoraRTC actions allow enabling/disabling microphones of all the interlocutors.
6. Set Camera Settings AgoraRTC action allows you to switch and configure the camera before starting a conference or streaming.
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.
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
9. Switch Camera AgoraRTC allows you to switch the camera by its label during a conference
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
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