Agora Inc.

04/14/2021 | News release | Distributed by Public on 04/14/2021 16:04

Migration Guide from Twilio to Agora: Web Edition

Integration of video calls in a web application has been popular in some major use cases, and with the advancements, in RTE many developers are trying to add real-time voice and video features to their own platform. Agora and Twilio are two of the top-rated cloud platforms that provide developer tools to integrate services like video calling, audio calling, messaging, and cloud recording. Still, there are many reasons users might switch from Twilio to the Agora SDK. Agora's network ensures minimal latency such that it is resilient to packet loss and jitter while the Agora SDK ensures that developers can easily integrate the APIs in their applications, making it globally scalable and secured. And the cherry on top is that the Agora SDK offers pricing that scales with your business and comes with 10,000 free minutes per month.

We are here to guide you for the transition from Twilio to Agora. To make things straightforward, we will be using the Twilio Quickstart sample app as a baseline:

In this guide, you learn how to easily replace Twilio's Video with Agora's RtcEngine to power live voice, video, and streaming integrations.

Step 1

You can use the same HTML code that you used for your Twilio code since it helps you give structure to your website. The structure of this HTML page remains the same as we declare two div tags that take care of local and remote streams. The only edit that you will have to make here is importing the Agora SDK instead of the Twilio SDK.

Step 2

After importing the Agora SDK in your HTML code, we shift to our JS file. Here, we begin by declaring a variable `appid` which holds the value of the App ID that you will get from your Agora dashboard. It looks something like this: 

let appid = '<-- Enter your APP ID here -->'

Follow this article to get the AppID.

Step 3

With the onClick event listener to our button, we will trigger a voice or a video call. Here we begin by replacing Twilio's endpoints with the Agora Client. Twilio code first creates an endpoint with a unique name and token that is retrieved by making your own server. But with Agora, we simply use the Client class and declare an object using the createClient method, which helps us use a range of functions from the Agora SDK, such as joining a channel and publishing a stream. The Agora SDK simplifies the process of initializing this client with just a single init method, while you have to define this init function with various event handlers like invite in the Twilio SDK.

Step 4

Once the client has been initialized, the video of the remote user and the local user needs to be a part of the UI so that the users can hear and see each other. In the Twilio SDK we use the invite function (as in the previous step). This invite function triggers the showConversation() function, which attaches both streams to the UI. In the Agora SDK this process is much easier, with a join function that allows various streams to be added in a single channel, which makes user management much easier. Declaring the requirements for a stream is as simple as entering Boolean values for Audio, Video, and Screen Sharing.

Step 5

Next, we have to manage the users and their views as they join or leave the stream. This is done with the use of some standard callback functions that are placed at the top. The process is similar for both the SDKs, but the ease of use and simplicity of the Agora SDK makes it stand out. Twilio uses some standard callback functions like participantConnected and participantDisconnected, while we have stream-added and stream-removed callbacks in the Agora web SDK.

We begin by replacing Twilio's participantConnected event with Agora's stream-added event, which occurs whenever a remote stream is added. Subsequently, Agora's subscribe method lets a user subscribe to a remote stream and then interact with other streams.

On completion we simply call stream-subscribed method which will subsequently add video streams for the new users that join the stream by creating new tags using appenChild() method.

Here, the addVideoStream() function creates these div tags and gives them a unique Id, which can be used to refer to a particular stream.

You can have a look at the complete code give over here.

Other features

The Agora SDK provides you an extensive range of functions that can be integrated into your application. The following functions are triggered with the press of a button:

  • Disconnecting the call
  • Muting the call
  • Disabling the camera

Testing

Before running the app, check the following points:

  • You have added your App ID.
  • If you're using a project that has App Certificate enabled, make sure to add the token as well in the joinChannel() function.

When you're ready, go ahead and run the index.html file.

Run

There you go! If you programmed your project according to the instructions in this guide, your code should run as least as well as, the code in this guide. If it does, then you have successfully adopted Agora. Congratulations! Welcome to the benefits of the Agora SD-RTN™.

Conclusion

Although it's impossible to account for all of the integrations, you can see that you replaced all of the salient generic features of Twilio with those of Agora in only five steps. Now it should be easy for you to adopt Agora's SDK and build your own engagement platform.

Other Resources

You can find the link to the GitHub repository that contains the complete code for this guide over here.

For more about other Agora APIs and their integration, this link will help you get started in building your own real-time engagement application using the Agora Web SDK.

I also invite you to join the Agora Developer Slack community, where you can interact with thousands of developers who are using the Agora SDK to build something innovative every day.

Want to build Real-Time Engagement apps?

Get started with 10,000 free minutes today!

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.

Share