How to Use Agora Web SDK to Add Real-Time Video

Did you know there are over 1.1 Billion websites around the world? And whatever your niche is, there will be hundreds, if not thousands of competitors. So you can imagine it will be quite challenging to stand out from the crowd unless your website has some engaging features.

Recently, real-time communication has grown exponentially. But how do you integrate it into your project? That’s where Agora Web SDK comes into play. Web development services use this powerful toolkit to integrate high-quality audio-video communication directly into the websites and web apps. But how?

Well, that’s what we will look at in this blog. But first, let’s see what Agora Web SDK is.

What is Agora Web SDK?

The Agora Web SDK is a JavaScript and TypeScript library that lets you real-time audio and video communication features to your web applications. This comprehensive software development kit is provided by Agora, a leading real-time communication (RTC) platform. Plus, it supports a range of features to enhance user interactiveness.

With Agora Web SDK, you can integrate functionalities like video chat, live streaming, and more directly into your website or web app.

Key Features of Agora Web SDK

The Agora Web SDK packs a powerful kit for developers looking to add real-time communication features to their websites. Here’s a breakdown of its key features:

• Real-time communication: The core functionality allows you to establish live connections between web browsers. This enables features like video conferencing, live streaming, and voice chats.
• WebRTC Powered: The SDK leverages WebRTC, a standard web API that facilitates peer-to-peer communication directly within browsers. This eliminates the need for additional plugins, enhancing user experience and security.
• Cross-Browser Compatibility: The Agora Web SDK is designed to work seamlessly across different web browsers. That ensures a smooth user experience regardless of the chosen browser.
• Customization options: The SDK offers a wide range of functionalities and APIs that allow you to customize the video experience. You can control features like screen sharing, recording, and user roles within your application.
• Global network optimization: Agora uses a global Software Defined Real-time Network (SD-RTN™) to optimize quality by routing traffic and minimizing latency. This ensures smooth communication even for geographically distanced users.
• Security: Agora prioritizes security with features like AES-256 Encryption and user authentication, keeping your communication channels safe.
• Scalability: The SDK is built to handle a large number of concurrent users, making it suitable for applications with high traffic. 
• Ease of integration: The Agora Web SDK provides clear documentation and sample code to simplify the integration process for developers. It integrates with popular web development frameworks, making it developer-friendly.

Thanks to these features, dedicated web developers use Agora Web SDK to add real-time video to their web application. Now, let’s see how to set up and use it.

How Do You Use Agora Web SDK to Add Real-time Video?

The Agora Web SDK empowers you to create interactive video call experiences within your web applications. Here’s a comprehensive guide to walk you through the process:

Step 1: Account & App ID

Before beginning with integration, you need to have an account for generating a unique App ID.

• Create a free account (or log in if you already have one).
• Within your project settings, navigate to “Project” and create a new project.
• Once your project is created, you’ll be provided with a unique App ID. This ID identifies your project and is essential for integrating the SDK.

Step 2: Project Configuration

Before diving into the code, decide the functionalities you want to offer in your video call application.

• Will it be one-on-one calls, group calls, or large-scale video conferences?
• Do you need features like screen sharing or recording?

This question will help you choose the appropriate functionalities and configuration options within the Agora console.

Step 3: Security Token (Optional Security Layer)

Depending on your security needs, consider generating a token for each user or session. Tokens control access and enhance security within your video call application. The Agora console provides tools to generate temporary or permanent tokens. You can learn the importance of web security in implementing protection that suits your application’s requirements.

Step 4: Library Integration

There are two ways to integrate the Agora Web SDK into your project:

• Using a CDN Link: Agora provides a Content Delivery Network (CDN) link for the Web SDK. Include this link directly in your HTML file using a <script> tag. The CDN link can also be found in your Agora project settings.

<script src="https://sdk.agora.io/AgoraRTC/latest/AgoraRTC.min.js"></script>

• Download and Include Locally: The second way to integrate is by downloading the Web SDK library from the Agora website. Then, include the library within your project using <script> tag referencing the local file path.

<script src="./path/to/AgoraRTC.min.js"></script>

By using any of the above methods, you can successfully integrate the SDK library into your application.

Step 5: Basic Initialization

In your JavaScript code, use the Agora Video SDK Web API to initialize the engine with your App ID and token:

const appId = "YOUR_APP_ID";
const token = "YOUR_TOKEN"; // Optional
let client = AgoraRTC.createClient({
mode: "rtc",
codec: "vp8"
});
client.init(appId, token, (uid, mediaType) => {
console.log("Initialization successful");
// Proceed with video functionalities
}, function(err) {
console.error("Initialization error", err);
});

If the output shows “Initialization successful”, you have successfully initialized the engine. However, if it shows “Initialization error ”, you may need to fix some issues.

Step 6: Join a Channel

Define a channel name that will act as your virtual video call room. Users with the same channel name can connect and communicate through real-time video. To join a channel, you can use client.join method by passing the channel name and a unique user ID:

const channelName = "your_unique_channel_name";
client.join(null, channelName, 0, (uid) => {
console.log("Joined channel successfully with UID:", uid);
// Proceed with creating and publishing video tracks
}, function(err) {
console.error("Join channel failed", err);
});

With this, you have defined and joined a channel successfully. Now, you can start adding your video stream. Let’s see how.

Step 7: Adding Your Video Stream

The Agora Web SDK allows you to publish audio and video streams. Use the AgoraRTC.createMicrophoneAndCameraTracks method to create local audio and video tracks for capturing microphone input:

let localTracks = await AgoraRTC.createMicrophoneAndCameraTracks(); // Creates audio & video tracks

It will create and add local audio and video tracks for publishing.

Step 8: Publishing Your Video

For publishing  local video tracks and audio, use the client.publish to make it visible to other users in the call:

await client.publish(localTracks);

This will publish both local audio and video.

Step 9: User Interface Integration

The next step is to integrate the Agora Web SDK functionalities within your website UI to display video streams. That can be done using an HTML video element. Here’s an example structure:

<div id="local-stream-container">
<video id="local-video" autoplay muted></video>
</div>
<div id="remote-stream-container">
</div>

In your JavaScript code, use the Agora Web SDK to listen for events and update the UI accordingly.

• For example, you can listen to the “user-published” event to identify when another user joins and publishes their video stream.
• Once a remote stream is available, use the client.subscribe method to subscribe to the remote video track. Then, you can add a new video element within the remote-stream-container div.

It will assign subscribed tracks to the new element.

Step 10: Leaving the Call 

When a user wants to end the call, use the client.leave method to leave the channel and clean up resources:

function endCall() {
client.leave((stats) => {
console.log("Left channel successfully");
// Unsubscribe from remote tracks (optional)
client.remoteUsers.forEach(user => client.unsubscribe(user));
// Clear local and remote streams from UI (optional)
}, function(err) {
console.error("Leave channel failed", err);
});
}

With this, you can leave the channel and clean the resources that were used.

By following this guide, you’ll be able to integrate Agora’s real-time video capabilities into your web application. But if you need to ensure security and UI/UX considerations, hire web development experts for smooth integration.

Common Issues and Fixes for Agora Web SDK

While integrating Agora Web SDK with your website is fairly easy, you may stumble upon a few challenges. So, here are some of the common issues, possible causes, and their fixes:

Initialization Errors

You might encounter errors during client.init.

Possible Causes

• Incorrect App ID
• Network Issues
• Browser Compatibility Issues

Fixes

• Double-check your App ID for accuracy.
• Ensure a stable internet connection.
• Verify compatibility with the specific browser version you’re using. Test across different browsers if needed.

Join Channel Errors

Errors might arise while trying to join a channel using the client.join method.

Possible Causes

• Incorrect Channel Name
• Network Connectivity Problems
• Firewall Restrictions

Fixes

• Make sure the channel name matches exactly between users trying to connect.
• Verify that all participants have a stable internet connection. 
• If you have firewall restrictions, ensure it allows communication with Agora servers.

Subscription Errors

You might receive errors during client.subscribe to subscribe to a remote video track.

Possible causes

• User Not Published
• Resource Limitations

Fixes

• The user you’re trying to subscribe to might not have published their video track yet.
• In some cases, browser resource limitations might hinder subscriptions. Consider optimizing your web application’s resource usage.

Video/Audio Issues

You might experience poor video or audio quality, dropped frames, or lags during calls.

Possible Causes

• Unstable Network Connections
• Insufficient Bandwidth
• Browser Hardware Limitations
• Client-Side Code Issues

Fixes

• Fluctuations in internet connection can significantly impact video and audio quality.
• Ensure users have sufficient bandwidth to support real-time video calls.
• Older or less powerful devices might struggle with video processing.
• Review your code for potential errors in handling audio/video tracks or UI rendering.

Permission Issues

You might encounter permission issues related to camera or microphone access in the browser.

Possible Causes

• The user is not granting permission
• Code not requesting permission properly

Fixes

• Guide users in granting camera/microphone access in browser settings.
• Verify that the code uses appropriate WebRTC APIs to request permission.

A successful integration often involves a combination of tips and a needs approach to coding and testing.

Consult with our professional web development company to ensure the best integration and handle these challenges effectively.

FAQs on Using Agora Web SDK

Conclusion

Integrating real-time video into your site is a powerful way to enhance user engagement and interaction. With Agora Web SDK, you can stream high-quality video with low latency, offering a smooth user experience.

To integrate the real-time audio with this tool effectively, you will need to set up an App ID, initialize the engine, join channels, manage local audio/video, display streams, and more.

If you need help with integrating this or other advanced features to your website, consult with our web developers today!