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.

BtnJoin component

please make sure to name the parameters correctly like this:

{
  <BtnJoin
    fetchURL={'https://..../Channel'}
    endURL={'https://..../Leave'}
    clientID={clientID}
    broadcastID={broadcastID}
    referenceID=""
    token="xxxxxxx"
    setError={setError}
    users={Users}
    setUsers={setUsers}
    setReply={setReply}
    setStatus={setStatus}
    btnStyle={{
      backgroundColor: '#833dcc',
      margin: '10px',
      padding: '10px 20px',
      color: 'white',
      border: 'none',
      borderRadius: '5px',
      cursor: 'pointer',
    }}
    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 'demo-live-agora';
import { useState } from 'react';

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://clientapi.tobsir.com/api/Broadcast/Channel'}
        endURL={'https://clientapi.tobsir.com/api/Broadcast/Leave'}
        clientID={clientID}
        broadcastID={broadcastID}
        referenceID=""
        token="0CC28DA8-A"
        setError={setError}
        users={Users}
        setUsers={setUsers}
        setReply={setReply}
        setStatus={setStatus}
        btnStyle={{
          backgroundColor: '#833dcc',
          margin: '10px',
          padding: '10px 20px',
          color: 'white',
          border: 'none',
          borderRadius: '5px',
          cursor: 'pointer',
        }}
        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.

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,
  });
}