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
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
{
"response": 0,
"message": "string",
"data": {
"agoraAppID": "string",
"agoraUserID": "string",
"rtmToken": "string",
"channel": "string",
"rtcToken": "string",
"duration": 0
}
}
{
"authenticationKey": "string",
"lang": "string",
"clientID": 0,
"token": "string",
"broadcastID": 0,
"referenceID": "string"
}
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 theChannel
api after that I create RTM clientrtmClient function
and login to RTMrtmLogin 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
.
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
.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;
}
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
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
please make sure to name the parameters correctly like this:
{
rtmClient({ appId: appId });
} // return RTM client
please make sure to name the parameters correctly like this:
{
rtmLogin({
uid: data.data.agoraUserID,
rtmToken: data.data.rtmToken,
appId: data.data.agoraAppID,
});
}
please make sure to name the parameters correctly like this:
{
rtcClient();
}
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
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,
});
}