Unlocking the Power of Agora UI Kit: A Deep Dive into 5 important Events, Features

In an era where real-time communication is essential for business success, Agora stands out as a leader in providing cutting-edge solutions for virtual events, live streaming, and interactive engagement.

From telemedicine to online education and live commerce, Agora empowers organizations to connect seamlessly with their audiences through high-quality, low-latency audio and video.

As the demand for remote engagement continues to grow, understanding Agora’s robust features and use cases is crucial for any business aiming to provide an exceptional real-time experience.

source: https://docs.agora.io

Agora’s Event Features

One of the standout features of Agora is its event management capabilities. Whether it’s hosting virtual conferences, webinars, or live Q&A sessions, Agora’s platform ensures that users experience minimal lag and maximum interactivity.

Agora also supports multi-user video conferencing with screen sharing and interactive whiteboards, which is perfect for businesses and educational institutions.

1. join-channel

  • This event will be triggered when a local user successfully joins a channel. It indicates that the connection with the Agora server has been established, and the user is now part of the ongoing session (audio or video).
  • This is useful for handling any setup tasks needed when a user successfully enters a session, such as initializing the user’s video feed, notifying other users, or enabling UI elements related to the channel.
rtcEngine.on("join-channel", (channel, uid, elapsed) => { console.log(`User with uid ${uid} joined channel ${channel} successfully`); // Perform actions like enabling video feed or updating UI });

2. user-joined

  • This event will be triggered when a remote user or host joins the current channel.
  • This is useful for notifying users when someone else joins a video or voice call, or to handle logic like updating the UI to show the new participant’s video feed.
rtcEngine.on("user-joined", (uid) => { console.log(`Remote user joined with uid: ${uid}`); // Handle new user joining, e.g., display video stream });

3. user-published

  • This event will be triggered when a remote user publishes an audio or video stream.
  • When a user starts sharing their audio or video feed, this event helps to subscribe to the stream and display it in the UI.
rtcEngine.on("user-published", (user, mediaType) => { console.log(`Remote user ${user.uid} published ${mediaType} stream`); // Subscribe to and render the remote stream rtcEngine.subscribe(user, mediaType); });

4. user-unpublished

  • This event will be triggered when a remote user stops publishing their audio or video stream.
  • This is useful for removing the stream from the UI when a user stops sharing audio or video.
rtcEngine.on("user-unpublished", (user, mediaType) => { console.log(`Remote user ${user.uid} unpublished ${mediaType} stream`); // Unsubscribe and remove the video from the UI });

5. user-left

  • This event will be triggered when a remote user leaves the current channel.
  • This is useful for removing the remote user or handling any logic required when a user exits the session, such as stopping their video feed.
rtcEngine.on("user-left", (uid) => { console.log(`Remote user with uid ${uid} left the channel`); // Handle the user leaving, e.g., remove their video feed });
source: https://docs.agora.io

Additional Common Events

1. connection-state-change

  • This event will be triggered when the connection state between the client and Agora’s server changes. Useful for handling network conditions or errors.
  • This is useful for knowing if any error or exception came during the video conferencing, additionally, this event provides the status of the network/bandwidth of the remote user and by knowing the network status, you need to show the network status to the remote user.
  • This event helps handle connection state transitions, and you can log or display relevant information to users based on connection status.
rtcEngine.on('connection-state-change', (curState, revState, reason) => { console.log(`Connection state changed from ${revState} to ${curState} due to: ${reason}`); // Handle different states switch (curState) { case 'DISCONNECTED': console.log('You are disconnected from the server.'); break; case 'CONNECTING': console.log('Connecting to the server...'); break; case 'CONNECTED': console.log('Successfully connected to the server.'); break; case 'RECONNECTING': console.log('Attempting to reconnect to the server...'); break; case 'FAILED': console.error('Failed to connect to the server.'); break; default: console.log(`Current connection state: ${curState}`); } });

2. volume-indicator

  • This event provides audio volume levels of users in the channel. It can be used to show which user is currently speaking (e.g., using a voice activity indicator).
  • This event helps visualize speaking activity and is useful for showing who is talking in real-time in a group chat or conference.
client.enableAudioVolumeIndicator(); // Enable volume indicator client.on('volume-indicator', (volumes) => { volumes.forEach((volume) => { console.log(`User ${volume.uid} has volume level ${volume.level}`); // Display a visual indicator based on volume level if (volume.level > 50) { console.log(`User ${volume.uid} is speaking loudly!`); // You can show a "speaking" icon next to the user's name } else { console.log(`User ${volume.uid} is speaking softly.`); } }); });

3. token-privilege-will-expire

This event will trigger when the token will expire in 30 seconds. You can use this event to request a new token before the old one expires.

client.on('token-privilege-will-expire', () => { console.log('Token will expire soon. Requesting a new token...'); // Request and renew the token here });

4. token-privilege-did-expire

This event will trigger when the token will expire in 30 seconds. You can use this event to request a new token before the old one expires.

client.on('token-privilege-did-expire', () => { console.log('Token has expired. Please renew the token.'); // Request and renew the token to stay connected });

Understand the Tech

This section explains how to integrate video calling features into your application using Agora’s technology. Below are some fundamental concepts related to real-time audio and video interaction that you should be familiar with:

1. Video SDK

  • The Agora Video SDK is a powerful software development kit designed to enable developers to seamlessly add real-time audio and video capabilities to their applications. This SDK offers low-latency, high-quality streaming that allows users to communicate effectively in real-time, whether in one-on-one calls, group video conferences, or interactive live-streaming scenarios.

2. Channel

  • The Agora Video SDK is a powerful software development kit designed to enable developers to seamlessly add real-time audio A channel is a virtual space where users can interact with each other in real-time. It is the primary means of transmitting audio, video, and data. Users who join the same channel can exchange media and interact live.
  • Channels are created dynamically and destroyed when no users are present, making them lightweight and flexible for different use cases like video conferencing, webinars, or live broadcasts.

3. Host

  • A host is a user who has permission to publish audio and video streams in a channel. Hosts can broadcast their media to others and also subscribe to streams published by other hosts on the same channel. In interactive live streaming (also known as RTC), hosts typically drive the content of the session. Multiple hosts can coexist in a channel, enabling interactive experiences such as interviews or panel discussions.

4. Audience

  • An audience member is a user assigned to a non-publisher role. While audience members can subscribe to the audio and video streams of hosts within the channel, they do not have the privilege to publish their media content. This role is commonly used in scenarios such as live streaming events or webinars where the audience can watch and listen but not participate by broadcasting. the session. Multiple hosts can coexist in a channel, enabling interactive experiences such as interviews or panel discussions.

5. Publisher vs. Subscriber

  • In Agora, users are often categorized as either publishers (those who send media streams) or subscribers (those who receive media streams). A host is both a publisher and a subscriber, while an audience member is typically only a subscriber.

6. Token Authentication

  • In many cases, it’s important to secure access to a channel using tokens. These tokens authenticate users, ensuring that only authorized participants can join the session. This is especially critical in paid or private events.

7. Interactive Live Streaming

  • n addition to one-on-one or group calls, Agora supports interactive live streaming (RTC with CDN integration), where hosts interact live with large audiences. In this scenario, latency is minimized, ensuring a real-time experience even with many participants.

8. Role Management:

  • Agora provides flexibility in dynamically managing roles within a channel. Users can switch from an audience to a host role or vice versa, making the platform ideal for interactive use cases where users need to transition between listening and broadcasting modes (e.g., during Q&A sessions).
source:https://docs.agora.io

Agora console dashboard overview

The Agora Dashboard Console provides a comprehensive suite of tools for developers and businesses to manage their real-time engagement projects. From project management and usage monitoring to API access, security settings, and real-time metrics, the console is designed to streamline the integration and management of Agora services.

It enables detailed monitoring, allows control over user access, helps secure your app with certificates and tokens, and offers billing insights, making it an essential tool for optimizing voice, video, and messaging applications.

source:https://docs.agora.io

1. Project Management

  • Create and Manage Projects: You can create multiple projects for different applications. Each project will have its own unique App ID and App Certificate.
  • App ID and App Certificate: Essential for securely integrating Agora services into your app. The App ID identifies the project, while the App Certificate is used to enhance security by generating tokens.
  • Token Management: Manage security tokens for your projects, which are required for authenticating users in secured channels.

2. Real-Time Metrics and Monitoring

  • Usage Dashboard: Provides detailed analytics on minutes used, channels created, active users, and total sessions for voice, video, and live streaming. You can track usage on a daily, weekly, or monthly basis.
  • Real-Time Monitoring: Monitor ongoing sessions with real-time data such as bandwidth usage, number of participants, and media quality metrics (latency, frame rate, bitrate).
  • Quality of Experience (QoE): Evaluate the quality of your sessions by viewing key performance indicators like audio and video quality, packet loss, jitter, and round-trip time (RTT).

3. Call & Event Logs

  • Call History: View logs of previous sessions, including start and end times, user IDs, and duration of the session.
  • Event Logs: Get detailed logs on events that occurred during sessions, such as connection state changes, user joins and leaves, and stream publications. These logs help debug and optimize session quality.

4. Cloud Recording Management

  • Cloud Recording Settings: Set up and manage Agora’s cloud recording service, allowing you to record audio and video streams from sessions.
  • Recorded Files: Access recorded media files, download them, or manage the storage. You can also set up automatic storage in third-party services like Amazon S3.

5. Message and Chat Service

  • Real-Time Messaging (RTM): Manage RTM services where you can send and receive messages, manage users, and configure push notifications for chat features within your application.
  • Message History: View past messages and check delivery statuses to ensure messaging services are operating smoothly.

6. User Management

  • User Role Management: Invite team members to the console and assign them roles such as Administrator, Developer, or Viewer. Each role has specific permissions for accessing and managing different parts of the dashboard.
  • Access Control: You can control who has access to your projects and specify the level of permissions each team member has.

7. Security and Authentication

  • App Certificates: Secure your projects with App Certificates, allowing you to generate tokens for secure access to Agora services.
  • Token Generator: Use the token generator tool to create tokens for testing or deployment, which are necessary for joining channels securely.
  • Data Encryption: Manage encryption options to enhance security for voice and video communications.

8. API Management

  • API Documentation and Keys: The console provides access to Agora API documentation, allowing you to integrate various features such as real-time voice, video, messaging, and live streaming into your apps.
  • API Key Management: Manage and configure the API keys necessary to authenticate your requests to Agora’s services.

9. Billing and Usage Reports

  • Billing Dashboard: View detailed billing information, including real-time updates on your Agora usage, with breakdowns for audio, video, and messaging services.
  • Usage Reports: Get downloadable reports on how much time your app spent on Agora’s services, including metrics like minutes used, region breakdown, and channel durations.
  • Pricing Plans: Explore Agora’s different pricing models based on your project’s needs, whether it’s for audio, video, or messaging services.

10. Integration Tools and SDKs

  • SDK Downloads: The console offers easy access to download various Agora SDKs, including for platforms such as iOS, Android, Web, and Windows.
  • Documentation and Resources: Access official Agora documentation, quick-start guides, and tutorials to help with integrating Agora’s solutions into your application.
  • Third-Party Integrations: Set up and manage integrations with third-party services like AWS S3 for cloud storage, or CDNs for content distribution.

11. Integration Tools and SDKs

  • Alerts and Notifications: Set up notifications and alerts for specific events, such as reaching usage thresholds, session failures, or recording errors. You can receive these notifications via email or through integrations with third-party services like Slack.

12. Testing and Debugging Tools

  • Test Network Quality: Test the network quality between your app and Agora servers to ensure smooth voice and video streaming.
  • Inspector Tool: This tool helps developers check the performance and logs of specific calls. It’s useful for debugging any issues related to connection, audio, or video quality.
  • Interactive Live Streaming Simulator: Simulate different live streaming scenarios to test how your app will perform under various conditions

Conclusion

Agora’s real-time engagement platform has revolutionized the way businesses and individuals communicate and interact. From live streaming to voice and video calls, its versatile API empowers developers to create immersive and scalable solutions across various industries. The array of events supported by Agora, such as user joins, leaves, or media state changes, provide seamless control and flexibility in real-time communication experiences.

Agora’s Call History feature allows developers and admins to view logs of previous sessions, including start and end times, user IDs, and session durations. This provides valuable insights into usage patterns and session performance. Additionally, detailed Event Logs track events such as connection state changes, user activity, and stream publications, making it easier to debug issues and optimize session quality, ensuring a smoother experience for end-users.

Furthermore, Agora’s global infrastructure ensures low latency and high-quality communication, even in regions with challenging network conditions. This makes it a dependable choice for developers looking to build solutions that need to maintain smooth, real-time interactions across diverse geographies.

As technology continues to evolve, Agora remains at the forefront of innovation, enabling richer and more interactive digital environments. Its robust features and event-logging framework allow developers to build solutions that are responsive, customizable, and reliable, making Agora a key player in shaping the future of real-time communication and engagement.