Building Agora Apps with Javascript: A Guide for Frontend Developers

Hermes
Agora.io
Published in
4 min readApr 25, 2024

--

Javascript and Typescript are the top languages for front-end developers to build websites, web apps, and PWAs. In this post, you’ll get a bird's eye view of the different Agora JavaScript SDKs and see examples of how you can utilize them in your next project.

Prerequisites

To make the most of the resources in this post, you should have:

The Agora JavaScript SDKs

Agora offers JavaScript SDKs for all products that are used to develop real-time features in front-end apps. These SDKs allow you to build browser apps for video calling, voice calling, chat, and more. They include:

Generating Access Tokens

To make use of these SDKs, you need a way to authenticate your users with Agora, in a way that doesn’t expose your Agora credentials. That means, even though you’re building a client-side app, you’ll still need a backend server to generate access tokens. These tokens verify the client has your authorization to access Agora’s real-time network.

Voice Calls and Live Podcasting with Agora Web SDK

Agora Voice Calling allows you to add crystal-clear audio chat or live audio streaming to any web application. With this SDK, you can add one-to-one or small-group voice communication with smooth, jitter-free streaming to your web app.

To install it from your command line:

npm i agora-rtc-sdk-ng

Once you’ve installed the SDK and generated your access token, you can build real-time voice communication features into your project.

See how to get started with real-time voice for the web using Agora’s Web SDK.

Programmable Real-time Video on the Web with Agora Video

The Agora Video Web SDK allows you to build robust and high-quality video and voice calling and live-streaming apps in the browser using Javascript. Check out Agora’s detailed API documentation.

Install Agora Video Web SDK:

npm i agora-rtc-sdk-ng

For React JS developers, use the Agora Video React Web SDK

npm i agora-rtc-react

Agora Chat

Agora Chat enables you to develop text-based chatting applications. Integrate private and group messaging into your applications.

Install the Agora Chat Web SDK:

npm i agora-chat

Agora Signaling

Agora Signaling provides low-latency, high-concurrency signaling and synchronization capabilities for real-time systems. It enables developers to apply low-latency event notifications and real-time changes to user, device, and channel attributes in applications without setting up complex backends to send and synchronize the data.

To get started with the Agora Signaling, install it with this command:

npm i agora-rtm-sdk

Other Resources

  • Dive into the Agora Documentation to better understand the features and capabilities offered by Agora SDK. Explore the API reference, sample codes, and best practices.
  • Be part of the Agora developer community: Join the conversation on X(Twitter), or LinkedIn to share experiences, and stay updated on the latest developments. Need support? Reach out via StackOverflow for advice on your implementation.
  • Continue your developer journey with more guides from Agora’s Medium publication.

Next Steps

I hope this article helped you get started building web apps with the Agora JavaScript SDKs. Make sure to bookmark this page so you have all the resources you need in one place. Also, if you’d like to see more articles like this that use Agora’s other SDKs, drop a comment with your ideas!

--

--

Hermes
Agora.io

Director of DevRel @ Agora.io … former CTO @ webXR.tools & AR Engineer @ Blippar — If you can close your eyes & picture it, I can find a way to build it