Implementing Agora WebSDK NG on React

Agora, the trending RTC API Providers now released its new product, WebSDK for Web Developers. Using this SDK, developers can integrate various Agora services to their web app seamlessly. From the beginning, agora never failed to amaze us with their new products. Recently, they released their new V-Chat for New Virtual Conferences, Which gained a lot of interest from various communities.

The Agora Web SDK NG is the next-generation SDK of the current Agora Web SDK, enabling audio and video real-time communications based on Agora SD-RTNTM and implementing scenarios such as voice-only calls, video call, voice-only interactive broadcast, and video interactive broadcast. The Agora Web SDK NG makes full-scale refactoring to the internal architecture of the Agora Web SDK and improves the usability of APIs.

With this brand new WebSDK, Agora offers a lot more features than a typical RTC API do. This includes Controlling Recording Devices, Adjusting Video Profiles while video calling, Displaying Call Status during Real-Time video call, Share Screen, Video beautify, and Audio Mixing features. As we’ve tested the Demo provided on their Documentation website, everything seems to work buttery smooth.

In this SDK they’ve implemented so many changes for seamless implementation of AgoraWebSDK on Web Apps. The new and improved coding styles will help developers to debug easily, implement a much cleaner code, and also reduces room for common programming errors. This provides simplified development experience in implementing agora on our web app.

New AgoraWebSDK put forth new features like TypeScript Support, ES6 Promise Support, and Track-based media objects.

1. For Implementing the next-gen AgoraWebSDK(beta) on to your react app, you need to install the dependency by using

npm install agora-rtc-sdk-ng --save

2. Import the following module into the Javascript code in your project.

import AgoraRTC from "agora-rtc-sdk-ng"  

For Implementing a basic video call,

1. Call createClient to create a local client object with your app ID.
2. Call AgoraRTCClient.join to join a specified channel.
3. Call createMicrophoneAudioTrack to create a MicrophoneAudioTrack object and call createCameraVideoTrack to create a CameraVideoTrack object.
4. Call AgoraRTCClient.publish to publish the local audio and video tracks that you create to the channel.

When a remote user joins the channel and publishes tracks :

1. The SDK triggers AgoraRTCClient.on("user-published"), in which you can get an AgoraRTCRemoteUser object.
2. Call AgoraRTCClient.subscribe to subscribe to the AgoraRTCRemoteUser object that you get.
3. Visit AgoraRTCRemoteUser.audioTrack and AgoraRTCRemoteUser.videoTrack to get the RemoteAudioTrack and RemoteVideoTrack of the remote user.

To create a local client

rtc.client = AgoraRTC.createClient({ mode: “rtc”, codec: “h264” });

In client mode, we can use rtc for one to one and group calls and live for live broadcast

For convenience, we define two variables and a function for the following code snippets. You can wrap all the following code snippets in the function.

const rtc = {   
client: null,    
localAudioTrack: null,   
localVideoTrack: null, 
};  
const options = {   
appId: "<YOUR APP ID>",   
channel: "demo_channel_name",   
token: null, 
};  

To join a channel, use

const uid = await rtc.client.join(options.appId, options.channel, options.token, null);

To publish local video and audio tracks, use

rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack(); rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
await rtc.client.publish([rtc.localAudioTrack,rtc.localVideoTrack]); 
console.log(“publish success!”);

For a remote user,

rtc.client.on("user-published", async (user, mediaType) => {   
await rtc.client.subscribe(user);   
console.log("subscribe success");    
if (mediaType === "video" || mediaType === "all") {   
const remoteVideoTrack = user.videoTrack;     
const playerContainer = document.createElement("div");    
playerContainer.id = user.uid;     
playerContainer.style.width = "640px";     playerContainer.style.height = "480px";     document.body.append(playerContainer);     
remoteVideoTrack.play(user.uid);   
}   
if (mediaType === "audio" || mediaType === "all") { 
const remoteAudioTrack = user.audioTrack;       remoteAudioTrack.play();   
} });
rtc.client.on("user-unpublished", user => {   
const playerContainer = document.getElementById(user.uid);   playerContainer.remove(); });

And finally, for leaving a channel,

async function leaveCall() { 
rtc.localAudioTrack.close(); 
rtc.localVideoTrack.close(); 
rtc.client.remoteUsers.forEach(user => {
const playerContainer = document.getElementById(user.uid); playerContainer && playerContainer.remove();
 });
await rtc.client.leave(); 
}

The link to my open-source demo can be accessed here.

They’ve provided clear documentation and demo on how to implement AgoraWebSDK NG on your web app. You can access Documentation Here and Demo Here. For Availing Demo Code, They’ve provided their code in Github. To see the code, Click Here. If you find any problems when using the Agora Web SDK NG, or have any suggestions, you can post a new issue in their repo so that they will look into that issue, as soon as possible.