Plugins
Templates
Template Setup Guides

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

Agora account setup

In order to use 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 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 Calls ID field

You're all set to use plugin actions, events and states.

In order to establish 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.

Demo to preview the settings: