# demo-live-agora

> 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!

Latest version **0.39.0** (published 2023-08-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install demo-live-agora
pnpm add demo-live-agora
yarn add demo-live-agora
bun add demo-live-agora
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.39.0 |
| Published | 2023-08-02 |
| First published | 2023-07-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 3 |
| Unpacked size | 169.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Elias-jewel |
| Maintainers | jewel-elias |

## Links

- npm: https://www.npmjs.com/package/demo-live-agora
- npm.io page: https://npm.io/package/demo-live-agora

## Dependencies (3)

- [react-icons](https://npm.io/package/react-icons.md) ^4.10.1
- [agora-rtm-sdk](https://npm.io/package/agora-rtm-sdk.md) ^1.5.1
- [agora-rtc-react](https://npm.io/package/agora-rtc-react.md) ^1.1.3

## Recent versions

- 0.39.0 (latest) — 2023-08-02
- 0.38.0 — 2023-08-02
- 0.37.0 — 2023-08-02
- 0.36.0 — 2023-08-02
- 0.33.0 — 2023-08-02
- 0.32.0 — 2023-08-02
- 0.31.0 — 2023-08-02
- 0.29.0 — 2023-08-01
- 0.28.0 — 2023-08-01
- 0.27.0 — 2023-08-01
- 0.26.0 — 2023-08-01
- 0.25.0 — 2023-08-01
- 0.24.0 — 2023-08-01
- 0.23.0 — 2023-08-01
- 0.22.0 — 2023-08-01
- … 20 more at https://npm.io/package/demo-live-agora/versions

## README

# 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:

```jsx
{
  <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:

```json
{
  "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:

```json
{
  "authenticationKey": "string",
  "lang": "string",
  "clientID": 0,
  "token": "string",
  "broadcastID": 0,
  "referenceID": "string"
}
```

### Example:

```jsx
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:

```jsx
{
  <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:

```js
{
  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:

```js
{
  rtmClient({ appId: appId });
} // return RTM client
```

### rtmLogin function

please make sure to name the parameters correctly like this:

```js
{
  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:

```js
{
  rtcClient();
}
```

### handleCallStates function

please make sure to name the parameters correctly like this:

```js
{
  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:

```js
{
  rtcJoin({
    rtcClient: rtcClient,
    appId: data.data.agoraAppID,
    channel: data.data.channel,
    rtcToken: data.data.rtcToken,
    uid: data.data.agoraUserID,
  });
}
```

---
_Source: https://npm.io/package/demo-live-agora · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._