A Comprehensive Guide to Implementing Agora Video SDK in a React Project

import React, { useEffect, useRef, useState } from 'react';
import { createClient, createMicrophoneAndCameraTracks } from 'agora-rtc-sdk-ng';
const appId = process.env.REACT_APP_AGORA_APP_ID; // App ID from .env
const client = createClient({ mode: "rtc", codec: "vp8" });
const VideoCall = ({ channelName, token }) => {
  const [users, setUsers] = useState([]);
  const [start, setStart] = useState(false);
  const [tracks, setTracks] = useState(null);
  const remoteVideoRefs = useRef({});
useEffect(() => {
 const init = async () => {
  const [localAudioTrack, localVideoTrack] = await createMicrophoneAndCameraTracks();

  client.on("user-published", async (user, mediaType) => {
  await client.subscribe(user, mediaType);
  if (mediaType === "video") {
    setUsers((prevUsers) => [...prevUsers, user]);
  }
 })
 client.on("user-unpublished", (user) => {
    setUsers((prevUsers) => prevUsers.filter((u) => u.uid !== user.uid));
 });
 await client.join(appId, channelName, token, null);
 await client.publish([localAudioTrack, localVideoTrack]);
 setTracks([localAudioTrack, localVideoTrack]);
 setStart(true);
};
init();
return () => {
  client.leave();
  tracks?.forEach((track) => track.close());
};
}, [channelName, token]);
return (
<div>
  <div id="local-stream">
    {tracks && <video autoPlay playsInline ref={(ref) => ref && tracks[1].play(ref)} />}
  </div>
<div id="remote-streams">
 {users.map((user) => (
  <video key={user.uid}
  autoPlay
  playsInline
  ref={(ref) => {
     if (ref) {
       user.videoTrack?.play(ref);
     }
    }}
   />
  ))}
 </div>
</div>
);
};
export default VideoCall;

import React from 'react';
import VideoCall from './VideoCall';
function App() {
  const channelName = "testChannel";
  const token = null; // Replace with a token if your project requires one.
  return (
    <div className="App">
  <h1>Agora Video Call</h1>
    <VideoCall channelName={channelName} token={token} />
    </div>
  );
}
export default App;

Step 6: Test the Application

Run the application: npm start

Open your application in multiple browser tabs or devices to test the functionality provided by the Agora Video SDK.

Step 7: Enhance the Application

Add Mute and Leave Controls:

You can add buttons to mute/unmute the microphone or leave the call:

<button onClick={() => tracks[0].setEnabled(false)}>Mute</button>
<button onClick={() => tracks[0].setEnabled(true)}>Unmute</button>
<button onClick={() => client.leave()}>Leave</button>

#local-stream, #remote-streams video {
 width: 300px;
 height: 200px;
 margin: 10px;
 border: 1px solid black;
}