Try Agora for Free
Sign up and start building! You don’t pay until you scale.
This guide is meant to assist developers migrating their existing Twilio Video implementation using React JS to the Agora Video React JS SDK. If you are initiating a new project, please refer to the Agora Video React JS SDK documentation.
A quick start demo for Agora with React JS can be found here on Github (Quick Start Demo). Additional demos can be found here: More Demos.
Check out api-ref.agora.io to view the full React JS SDK documentation.
To access Agora services and integrate them into your project, follow these steps to obtain the necessary information from the Agora Console:
Use npm, pnpm or yarn
# with npm
npm i agora-rtc-react
# or with pnpm
pnpm add agora-rtc-react
# or with yarn
yarn add agora-rtc-reactnpm uninstall twilio-video`The Agora React SDK uses hooks and components to simplify the integration of Agora’s Video features into a React web app. To ensure that the hooks and components are using the same client, a client is created with useRTCClient and passed to the AgoraRTCProvider
import AgoraRTC { useRTCClient } from "agora-rtc-react"
// Initialize Agora Client
const client = = useRTCClient(
AgoraRTC.createClient({
codec: “vp8”,
mode: “rtc”
})
);
return () => {
<AgoraRTCProvider client={client}>
{/* Video Call Components that use the common client context */}
</AgoraRTCProvider>
}The useRTCClient hook can be used to retrieve the client object from the AgoraRTCProvider context
const client = = useRTCClient()import { useJoin } from "agora-rtc-react"
// Join the channel
useJoin(
{
appid: 'AppID',
channel: 'ChannelName'!,
token: 'TOKEN',
uid: 0
},
);The useJoin hook lets a user automatically join a channel when the component is ready and automatically leaves the channel when the component is unmounted.
import { useJoin } from "agora-rtc-react"
// Join the channel
useJoin(
{
appid: 'AppID',
channel: 'ChannelName'!,
token: 'TOKEN',
uid: 0
},
);<div class="video-container-div" width="1920" height="1080"></div><span class="hljs-comment">// video
let localVideoTrack = await twilioVideo.createLocalVideoTrack({
height: { ideal: 720, min: 480, max: 1080 },
width: { ideal: 1280, min: 640, max: 1920 },
aspectRatio: 16/9,
})
twilioRoom.localParticipant.publishTrack(localVideoTrack)
const localMediaContainer = document.getElementById('video-container-div')
localMediaContainer!.appendChild(localVideoTrack.attach())
// audio
let localAudioTrack = await twilioVideo.createLocalAudioTrack()
twilioRoom.localParticipant.publishTrack(localAudioTrack);
const audioElement = localAudioTrack.attach();
document.body.appendChild(audioElement);import {
useLocalMicrophoneTrack,
useLocalCameraTrack,
usePublish,
LocalVideoTrack,
LocalUser
} from "agora-rtc-react"
// get local microphone and camera
const { localMicrophoneTrack } = useLocalMicrophoneTrack();
const { localCameraTrack } = useLocalCameraTrack();
// Publish local microphone and camera
usePublish([localMicrophoneTrack, localCameraTrack]);
// Play local video using components
return () => {
// Option 1: <LocalVideoTrack />
<LocalVideoTrack track={localCameraTrack} play />
// Option 2: <LocalUser />
<LocalUser
audioTrack={localMicrophoneTrack}
videoTrack={localCameraTrack}
cameraOn={true}
micOn={true}
playAudio={false}
playVideo={true}
/>
}Twilio Video/Audio is track-based, requiring looping through each video/audio track to unpublish the video/audio
twilioRoom.localParticipant.videoTracks.forEach((publication) => {
publication.unpublish();
publication.track.stop();
var selfTwilioVideo = document.getElementById('video-container-div')
selfTwilioVideo?.querySelector('video')?.remove()
})
twilioRoom.localParticipant.audioTracks.forEach((publication) => {
publicaLike Twilio’s Video/Audio, Agora’s Video/Audio is also track based. Once a track has been published with usePublish you can un-publish the tracks in two ways: automatically when the component using usePublish is unmounted; or manually without having to unmount the component.
await client.unpublish(); // Unpublish all tracks at once
await client.unpublish(localCameraTrack); // Unpublish 1 track
await client.unpublish([localAudioTrack, localCameraTrack]); // Unpublish specific set of tracks
// Track destruction:
localAudioTrack.close();
localVideoTrack.close();Note on unpublish:
This methods can be called multiple times. You can use `publish` and `unpublish` to manage the publication and unpublishing of specific local tracks.
This method is asynchronous and should be used with `Promise` or `async/await`.
In Twilio, you might have used participantConnected and trackSubscribed event listeners.
<div class="remote-video-container" width="1920" height="1080"></div> twilioRoom.on('participantConnected', (participant) => {
participant.on('trackSubscribed', (track) => {
// a user turned on their video, render it
document.getElementById('remote-video-container-div').appendChild(track.attach());
});
participant.on('trackUnsubscribed', (track) => {
// a user turned off their video, stop rendering it
var selfTwilioVideo = document.getElementById('remote-video-container')
selfTwilioVideo.querySelector('video').remove()
})Once a remote user successfully publishes audio/video tracks, the SDK adds the remote user to it’s list of remote users. Retrieve the list of remote users with the useRemoteUsers hook, and use the RemoteUser component to subscribe and play the remote user’s audio and video tracks.
twilioRoom.on('participantConnected', (participant) => {
participant.on('trackSubscribed', (track) => {
// a user turned on their video, render it
document.getElementById('remote-video-container-div').appendChild(track.attach());
});
participant.on('trackUnsubscribed', (track) => {
// a user turned off their video, stop rendering it
var selfTwilioVideo = document.getElementById('remote-video-container')
selfTwilioVideo.querySelector('video').remove()
})Alternatively, you can use the useRemoteAudioTracks to automatically subscribe and retrieve the remote user’s audio and video tracks (respectively). When the component is unmounted the hook stops subscribing to the video tracks of the specified users.
//remote users
const remoteUsers = useRemoteUsers();
const { audiotracks } = useRemoteAudioTracks(remoteUsers)
const { videotracks } = useRemoteVideoTracks(remoteUsers)
return (
<></>
)You can selectively retrieve the remote tracks of a specific user with useRemoteUserTrack.
//remote users
const remoteUsers = useRemoteUsers();
const audiotrack = useRemoteUserTrack(remoteUsers[0], 'audio')
const videotracks = useRemoteUserTrack(remoteUsers[0], 'video')
return (
<></>
) twilioRoom.disconnect()The Agora React SDK makes it very simple to leave a channel. When the component that calls useJoin unmounts, the Agora client will automatically leave the channel.
To manually leave the channel use client.leave(), the SDK immediately destroys objects related to the current channel, including subscribed remote user objects, remote track objects, and objects recording connection status. To rejoin the channel, call join after calling leave.
await client.leave();The Agora Video React SDK provides a rich set of features that can enhance your video conferencing application. Here are some key features and information to consider:
For comprehensive details on Agora Video React SDK features and how to implement them, refer to the Agora Video React SDK Documentation.
Explore the full potential of Agora Video React SDK to create a robust and feature-rich video conferencing experience. If you have specific feature requirements, consult the documentation for guidance on implementation.
