1 day ago The architecture of an Agora Video Call. So what’s the diagram all about? Let’s break it down a bit. Channels are similar to chat rooms, and every App ID can spawn multiple channels. Users can join and leave a channel at will. We’ll be implementing the methods mentioned in. Implement the basic video call This section introduces how to use the Agora Video SDK to make a call. The following figure shows the API call sequence of a basic one-to-one video call. Agora provides an open-source video call sample project that implements Agora-RN-Quickstart on GitHub. You can download it and view the source code. The Agora Voice Call SDK uses a 48 kHz sampling rate with full-sound bandwidth capture. It provides natural audio reproduction and ensures clear sound when it matters most. Agora’s Real-Time Engagement Platform provides HD audio up to 192kbps (hardware limitations apply) supported by our in-house SOLO™ and NOVA™ audio codecs. This video provides a quick and easy tutorial to create a simple video calling app in under 10 minutes using the Agora Web SDK. Signup here: https://sso.agor.
Note: Updated for use with NG SDK (4.x)
Integrating video streaming features into your application can be very tedious and time-consuming. Maintaining a low-latency video server, load balancing, and listening to end-user events (screen off, reload, etc.) are some of the really painful hassles — not to mention having cross-platform compatibility.
Feeling dizzy already? Fear not! The Agora Video SDK allows you to embed video calling features into your application within minutes. In addition, all the video server details are abstracted away.
In this tutorial, we’ll create a bare-bones web application with video calling features using vanilla JavaScript and the Agora Web NG SDK.
You can test a live demo of this tutorial here.
Prerequisites
- Google Chrome
- You can get started with Agora by following this guide and retrieve the Appid.
- Also, retrieve the temporary token if you have enabled the app certificate.
Project Setup
This is the structure of the application that we are developing:
Building index.html
The structure of the application is very straightforward.
You can download the latest version of the Agora Web SDK from the Agora Downloads page. Or you can use the CDN version instead, as shown in the tutorial:
There is a container with an id me that is supposed to contain the video stream of the local user (you).
There is a container with an id remote-container to render the video feeds of the other remote users in the channel.
Building styles.css
Now, let’s add some basic styling to our app:
Building the Video calling client
First, let’s make some helper functions to handle trivial DOM operations like adding and removing video containers:
The architecture of an Agora Video Call
So what’s the diagram all about? Let’s break it down a bit.
Channels are similar to chat rooms, and every App ID can spawn multiple channels.
Users can join and leave a channel at will.
We’ll be implementing the methods mentioned in the diagram in script.js.
Creating a Client
First, we need to create a client object by calling the AgoraRTC.createClient method. Pass in the parameters to set the video encoding and decoding format (vp8) and the channel mode (rtc):
Creating Local Media Tracks and Initializing
Let’s create audio and video track objects for the local user by calling the AgoraRTC.createMicrophoneAndCameraTracks method. (Although optional, You can also pass in the appropriate parameters as per docs to tweak your tracks).
We can now initialize the stop button and play the local video feedback in the browser (“me” container) to provide feedback:
initStop is defined at the end of the code as a cleanup function:
Adding Event Listeners
To display the remote users in the channel and to handle the view appropriately when somebody enters and exits the video call, we’ll set up event listeners and handlers:
Joining a Channel
Now we’re ready to join a channel by using the client.join method:
If you have the app certificate enabled in your project, you have to generate a temporary token and pass it into the HTML form. If the app certificate is disabled, you can leave the token field blank.
For production environments:
Note:This guide does not implement token authentication, which is recommended for all RTE apps running in production environments. For more information about token-based authentication in the Agora platform, see this guide: https://bit.ly/3sNiFRs
We will allow Agora to dynamically assign a user ID for each user who joins in this demo, so pass in null for the UID parameter.
Publishing Local Tracks into the Channel
Now it’s time to publish our video feed on the channel:
Testing the project
Run the project by double-clicking the index.html. Make sure you have the latest version of chrome for testing the project.
Conclusion
Shazam! Now we can conduct a successful video call in our application.
Note: When you try to deploy this web app (or any other that uses the Agora SDK), make sure the server has an SSL certificate (HTTPS connection).
The codebase for this tutorial is available on GitHub.
Other Resources
For more information about building applications using Agora.io SDKs, take a look at Agora Video Call Quickstart Guide and Agora API Reference.
I also invite you to join the Agora Developer Slack community.
Want to build Real-Time Engagement apps?
If you have questions, please call us at 408-879-5885. We’d be happy to help you add voice or video chat, streaming and messaging into your apps.
Categories
The Real-Time Engagement Platform for meaningful human connections.
People engage longer when they see, hear, and interact with each other. With Agora, you can embed vivid voice and video in any application, on any device, anywhere.
Agora powers an average of over
40,000,000,000
minutes of human connection per month
Products
Build it with Agora
Agora provides the SDKs and building blocks to enable a wide range of real-time engagement possibilities.
Why Agora
The most advanced developer platform
Intelligent network
Our network monitors activity in real time and automatically selects the most efficient routing path for sub-second latency globally across 200+ data centers.
Access to all users
Compatible with all popular development platforms and mobile-device friendly with minimal battery consumption.
Hyper scalable
Architected to withstand sudden spikes in traffic, gracefully scaling from one to millions of concurrent users as your business demands.
Flexible building blocks
Developers can create unique experiences with our extensive APIs, customizable UI and pre-integrated third-party extensions.
Mission-critical reliability
99.99% uptime, 400ms average global latency and zero system-wide downtime in company history.
Enterprise support plans
Our industry-leading technical team provides 24×7 development and operational support.
Solutions
For meaningful human connections
Explore the ways voice and video are redefining engagement
Developers
Made for developers
It only takes a few lines of code to connect to the Agora platform.
See the full list of supported platforms on our SDK downloads page.
SUCCESS STORIES
Agora Video Call For Windows
Global companies and startups trust the Agora platform
Agora Video Calling
We’re ISO certified and compliant for HIPAA, GDPR, and more