Work with AGORA Live (Simple Way)

this package simplify the using of agora live call so you don't have to know anything about tokens and channels you just have to return BtnJoin Component and pass the correct parameters to it, and it's DONE!

Read the documentation carefully.

If you are searching for agora call not live you can use the react-agora-call package

BtnJoin component

please make sure to name the parameters correctly like this:

{
  <BtnJoin
    fetchURL={'https://..../Channel'}
    endURL={'https://..../Leave'}
    clientID={clientID}
    broadcastID={broadcastID}
    referenceID={referenceID}
    token="xxxxxxx"
    setError={setError}
    users={Users}
    setUsers={setUsers}
    setReply={setReply}
    setStatus={setStatus}
    btnText="Join Broadcast 📞"
  />;
} // it returns a button with the provided Style and Text and a video player that appears when the call is on going

the response for 'https://..../Channel' API should be like:

{
  "response": 0,
  "message": "string",
  "data": {
    "agoraAppID": "string",
    "agoraUserID": "string",
    "rtmToken": "string",
    "channel": "string",
    "rtcToken": "string",
    "duration": 0
  }
}

the response for 'https://..../Leave' API should be like:

{
  "authenticationKey": "string",
  "lang": "string",
  "clientID": 0,
  "token": "string",
  "broadcastID": 0,
  "referenceID": "string"
}

Example:

import { BtnJoin } from 'react-agora-live';
import { useState } from 'react';
import 'react-agora-live/src/index.css';

function TestPackage() {
  const clientID = 25;
  const broadcastID = 93;
  const [Error, setError] = useState('');
  const [Users, setUsers] = useState('');
  const [Reply, setReply] = useState('');
  const [Status, setStatus] = useState('');

  return (
    <div>
      <BtnJoin
        fetchURL={'https://..../Channel'}
        endURL={'https://..../Leave'}
        clientID={clientID}
        broadcastID={broadcastID}
        referenceID={referenceID}
        token="xxxxxx"
        setError={setError}
        users={Users}
        setUsers={setUsers}
        setReply={setReply}
        setStatus={setStatus}
        btnText="Join Broadcast 📞"
      />
    </div>
  );
} // it returns a button with the provided Style and Text and a video player that appears when the call is on going

export default TestPackage;

Here where I call function called channel.

In the channel function I talk to the Channel api after that I create RTM client rtmClient function and login to RTM rtmLogin function.

Then I create an RTC Client rtcClient function.

Then I handle the states of the call by calling handleCallStates.

After that I used the RTC client to join the channel rtcJoin function.

Styling

if you need to use default style you can import this file

import 'react-agora-live/src/index.css';

or you can Customize Style by creating another CSS file and override the classes mentioned in the index.css file

index.css

.call-button-agora {
  background-color: #833dcc;
  margin: 10px;
  padding: 10px 20px;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.videos-container-agora {
  border: solid 2px #ebebeb;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30vw;
  height: 100vh;
  margin: auto;
}
.video-player-container-agora {
  margin-bottom: 30px;
}
.agora-video-player-agora {
  width: 30vw;
  height: 80vh;
}

.top-buttons-container-agora {
  margin: auto;
  width: 100%;
  border-radius: 50px 50px 0 0;
  background-color: transparent;
}

.buttons-container-agora {
  width: 100%;
}

.button-style-agora {
  background-color: #f1e7fc;
  color: #a28cb6;
  border: none;
  border-radius: 10px;
  height: 7vh;
  width: 100%;
  cursor: pointer;
  font-size: 15px;
  margin-bottom: 10px;
}

.button-icon-agora {
  width: 50%;
  height: 50%;
}

.live-flag {
  background-color: red;
  color: white;
  width: 50px;
  height: 25px;
  position: absolute;
  top: 10vh;
  right: 37vw;
  border-radius: 6px;
}

More details if you need it

Video player (Videos) component

please make sure to name the parameters correctly like this:

{
  <Videos
    endURL={endURL}
    users={users}
    clientID={clientID}
    token={token}
    broadcastID={broadcastID}
    referenceID={referenceID}
  />;
} // return a video player

Here where I talk with the Leave api when leaving the live call

Channel function

please make sure to name the parameters correctly like this:

{
  channel({
    fetchURL,
    clientID,
    broadcastID,
    referenceID,
    token,
    setError,
    setUsers,
    setReply,
    setStatus,
  });
} // Do most of the functionality

rtmClient function

please make sure to name the parameters correctly like this:

{
  rtmClient({ appId: appId });
} // return RTM client

rtmLogin function

please make sure to name the parameters correctly like this:

{
  rtmLogin({
    uid: data.data.agoraUserID,
    rtmToken: data.data.rtmToken,
    appId: data.data.agoraAppID,
  });
}

rtcClient function

please make sure to name the parameters correctly like this:

{
  rtcClient();
}

handleCallStates function

please make sure to name the parameters correctly like this:

{
  handleCallStates({
    RtcClient: rtcClient,
    setUsers: setUsers,
    setReply: setReply,
    setStatus: setStatus,
  });
}

this function tracks the states of the call

rtcJoin function

please make sure to name the parameters correctly like this:

{
  rtcJoin({
    rtcClient: rtcClient,
    appId: data.data.agoraAppID,
    channel: data.data.channel,
    rtcToken: data.data.rtcToken,
    uid: data.data.agoraUserID,
  });
}