Work with AGORA Call (Simple Way)

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

Read the documentation carefully.

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

ROOTCONTAINER component

please make sure to name the parameters correctly like this:

{
  <RootContainer
    token="xxxxx"
    fetchRtmURL={'https://..../RtmToken'}
    callURL={'https://..../Call'}
    callChannelURL={'https://..../CallChannel'}
    endURL={'https://..../EndCall'}
    clientID={clientID}
    employeeID={employeeID}
    callTypeID={callTypeID}
    setCallReturnedObj={setcallObj}
    setErrorCallMsg={setErrorCallMsg}
    setReplyCallStatus={setReplyCallStatus}
    setReturnedCallChannelObj={setReturnedCallChannelObj}
    setErrorCallChannel={setErrorCallChannel}
    btnText="Root Dial 📞"
  />;
} // return a button with the provided Style and Text

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

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

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

{
  "response": 0,
  "message": "string",
  "data": {
    "callID": 0,
    "calleeID": "string",
    "duration": 0
  }
}

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

{
  "response": 0,
  "message": "string",
  "data": {
    "channel": "string",
    "callTypeID": 1,
    "duration": 0,
    "rtcToken": "string"
  }
}

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

{
  "response": 0,
  "message": "string",
  "data": {
    "duration": 0,
    "cost": 0,
    "balance": 0
  }
}

Example:

import { useState } from 'react';
import { RootContainer } from 'react-agora-call';
import 'react-agora-call/src/index.css';

function TestPackage() {
  const clientID = 25;
  const employeeID = 13;
  const callTypeID = 2;
  const [callObj, setcallObj] = useState(null);
  const [replyCallStatus, setReplyCallStatus] = useState(null);
  const [errorCallMsg, setErrorCallMsg] = useState(null);
  const [returnedCallChannelObj, setReturnedCallChannelObj] = useState('');
  const [errorCallChannel, setErrorCallChannel] = useState('');

  return (
    <div>
      <RootContainer
        token="274B0C41-0"
        fetchRtmURL={'https://..../RtmToken'}
        callURL={'https://..../Call'}
        callChannelURL={'https://..../CallChannel'}
        endURL={'https://..../EndCall'}
        clientID={clientID}
        employeeID={employeeID}
        callTypeID={callTypeID}
        setCallReturnedObj={setcallObj}
        setErrorCallMsg={setErrorCallMsg}
        setReplyCallStatus={setReplyCallStatus}
        setReturnedCallChannelObj={setReturnedCallChannelObj}
        setErrorCallChannel={setErrorCallChannel}
        btnText="Root Dial 📞"
      />
    </div>
  );
}

export default TestPackage;

Styling

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

import 'react-agora-call/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

.videos-container-call-agora {
  background-color: #ebebeb;
  border: solid 1px #ebebeb;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30vw;
  height: 90vh;
  margin: auto;
}

.agora-video-player-call-agora {
  width: 30vw;
  height: 90vh;
}

.top-buttons-container-call-agora {
  background-color: #f8f8f8;
  border: 1px solid #f8f8f8;
  border-radius: 50px 50px 0 0;
  padding-bottom: 25px;
  width: 30vw;
  margin: auto;
  height: 22vh;
  position: absolute;
  left: 0;
  right: 0;
  top: 75vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.button-style-call-agora {
  height: 7vh;
  cursor: pointer;
  border: none;
  background: none;
  color: #e10808;
}

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

More details if you need it

RTMCONTAINER component

please make sure to name the parameters correctly like this:

{
  <RtmContainer
    token="274B0C41-0"
    fetchRtmURL={fetchURL}
    callURL={callURL}
    callChannelURL={callChannelURL}
    clientID={clientID}
    employeeID={employeeID}
    callTypeID={callTypeID}
    setRtmReturnedObject={setRtmReturnedObj}
    setCallReturnedObj={setcallObj}
    setErrorCallMsg={setErrorCallMsg} //optional
    setReplyCallStatus={setReplyCallStatus}
    setRtcToken={setRtcToken} //optional
    setChannel={setChannel} //optional
    setReturnedCallChannelObj={setReturnedCallChannelObj} //optional
    setErrorCallChannel={setErrorCallChannel} //optional
    btnText="Dial 📞"
  />;
} // return a button with the provided Style and Text

RTCCONTAINER component

please make sure to name the parameters correctly like this:

{
  <RtcContainer
    uid={userid}
    rtcToken={rtcToken}
    appId={appid}
    channel={channel}
    callTypeId={callTypeID}
    setReply={setReply}
    setStatus={setStatus}
    endURL={endURL}
    callID={callID}
  />;
} // return video player with mute and speaker buttons

RTC Client

please make sure to name the parameters correctly like this:

{
  rtcClient();
} // return RTC client

RTM Token

please make sure to name the parameters correctly like this:

{
  rtmToken({
    fetchURL,
    clientID,
    employeeID,
    callTypeID,
    token,
    setReturnedObject,
  });
} // return nothing

RTM Client

please make sure to name the parameters correctly like this:

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

RTM LOGIN

please make sure to name the parameters correctly like this:

{
  rtmLogin({ rtmClient, uid, rtmToken });
} // return RTM login

Call

please make sure to name the parameters correctly like this:

{
  call({
    fetchURL,
    clientID,
    employeeID,
    callTypeID,
    token,
    setReturnedObject,
    setError,
    setReply,
  });
} // return nothing
// console.log(callObj, "call Object");
// console.log(errorCallMsg, "ERROR CALL MSG");
// console.log(replyCallStatus, "Reply Call Status (Refused, Calling,..)");
// console.log(rtcToken, "RTC TOKEN");

you can view the error by passing the setter [error, setError] and then you can view the error state

you can view the returned object by passing the setter [returnded, setReturnedObject] and then you can view the returnded state

you can view the status of the call (Calling, Refused, Going on,...) by passing the setter [reply, setReply] and then you can view the reply state