JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 402
  • Score
    100M100P100Q36744F
  • License MIT

Package Exports

  • react-agora-call
  • react-agora-call/dist/index.js
  • react-agora-call/dist/react-agora-call.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-agora-call) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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!

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