Plugins
Templates

Agora API Connector Plugin

Link to plugin page: https://zeroqode.com/plugin/agora-api-connector-1569252528377x662238049686155900

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.

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

New Agora version - V4.5 has been released. Docs for AgoraConnector element based on version 4.5 please check here: https://docs.zeroqode.com/plugins/agora-streaming-and-video-conferencing.

For Agora Streaming Component (version below 4.5) documentation check out the link: https://docs.zeroqode.com/plugins/agora-api-connector-plugin/agora-streaming-component

For Agora Cloud Recording for Streaming Component (version below 4.5) documentation check out the link: https://docs.zeroqode.com/plugins/agora-api-connector-plugin/agora-streaming-component/agora-cloud-recording-for-streaming-component

How to Setup

In order to use the plugin, you'll need to create a developer account to get the App ID key at: https://docs.agora.io/en

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

2. Go to Project Management tab and create 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 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.

Plugin fields, events, states, actions, error management.

After the plugin setup, for installation follow these steps:

  1. Place the Agora Connector element on the page

  2. Add 2 elements ex: Visual Element (Shape) or Container (Group or Floating Group) on page, which will be used to render the local and remote video respectively

  3. Assign in the ID attribute field for the above elements (Step 2), respective IDs :

  • agora-local - used to render local video connection

  • agora-remote - used to render remote video connection

How to get access to custom ID attribute field of an visual element: https://forum.zeroqode.com/t/how-to-add-id-attribute-to-html-elements/469

The plugin proprieties :

Integrated UI Controls - This toggle offers option to enable or disable the on screen UI controls on video window.

After this steps, you'll have access to all the plugin actions, events, and states.

Actions

  • Join Room (Room Name) - joining a room by the given name.

  • Leave Room - leave the current room.

  • Mute Self Audio - mute self audio for other connected peers.

  • Resume Self Audio - resume self audio for other connected peers.

  • Mute Self Video - mute self video for other connected peers.

  • Resume Self Video - resume self video for other connected peers.

  • Mute All Video - mute all other connected peers video for us.

  • Resume All Video - resume all other connected peers video for us.

  • Mute All Audio - mute all other connected peers audio for us.

  • Resume All Audio - resume all other connected peers audio for us.

Events

  • Connector Initialized - Triggers when the Agora connector (plugin) is ready.

  • Connector Initializing Failed - Triggers when the Agora connector (plugin) can't be initialized.

  • Someone Joined Room - Triggers when someone joined the room.

  • Someone Left Room - Triggers when someone left the room.

  • Someone Muted Audio - Triggers when someone muted the audio.

  • Someone Unmuted Audio - Triggers when someone unmuted the audio.

  • Someone Muted Video - Triggers when someone muted the video.

  • Someone Unmuted Video - Triggers when someone unmuted the video.

  • Media Access Allowed - Triggers when media access allowed, using a camera and microphone.

  • Media Access Denied - Triggers when media access denied, using camera and microphone.

  • Joined Room - Triggers when I joined a room.

  • Joined Room Failed - Triggers when my try to join a room failed.

States

Peers Online (Number) - Publishing how many peers are online, real-time mode.

Error management

The plugin comes with error handling and reporting it to bubble debugger, so you know what is happening with the plugin and why it doesn't work like expected. Example below:

Error management handling

Error refers to the Agora ID field from the Plugins Settings tab, which should be filled.

Troubleshooting

  1. The actual resolution, frame rate, and bitrate depend on the device.

Please check the following links: https://docs.agora.io/en/Video/video_profile_web?platform=Web#sample-code and https://docs.agora.io/en/Video/faq/android_background

2. If you are sure that everything is set up correctly according to the documentation and there are still display problems on devices, you may contact Agora directly, providing the detailed logs.

To get the detailed logs while call time, open dev console (the shortcut for most browsers on Mac is Alt + Command + I , for Windows you can use Ctrl + Shift + I).

3. For mobile device compatibility please check Agora FAQ: https://docs.agora.io/en/Interactive%20Broadcast/faq/web_on_mobile

4. For browsers support please check Agora FAQ: https://docs.agora.io/en/Interactive%20Broadcast/faq/browser_support

Changelogs

Update: 23/01/2021 –

  • Added new functionality for getting Agora console logs with a checkbox to manage it and new parameter for choosing the browser's video codec

Update: 26/01/2021 –

  • Added a new function which allows loading logs to Agora

Demo to preview the settings: