Playground with AGORA (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!

hiiii

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}
    btnStyle={{
      backgroundColor: '#833dcc',
      margin: '10px',
      padding: '10px 20px',
      color: 'white',
      border: 'none',
      borderRadius: '5px',
      cursor: 'pointer',
    }}
    btnText="Root Dial 📞"
  />;
} // return a button with the provided Style and Text

Example:

import { useState } from 'react';
import { RootContainer } from 'youtube-demo-jewel';

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}
        btnStyle={{
          backgroundColor: '#833dcc',
          margin: '10px',
          padding: '10px 20px',
          color: 'white',
          border: 'none',
          borderRadius: '5px',
          cursor: 'pointer',
        }}
        btnText="Root Dial 📞"
      />
    </div>
  );
}

export default TestPackage;

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
    btnStyle={{
      backgroundColor: '#833dcc',
      margin: '10px',
      padding: '10px 20px',
      color: 'white',
      border: 'none',
      borderRadius: '5px',
      cursor: 'pointer',
    }}
    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