# rankrtc

> React component that embeds Janus client inside react application

Latest version **1.1.12** (published 2026-04-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install rankrtc
pnpm add rankrtc
yarn add rankrtc
bun add rankrtc
```

## Health

**Score 50/100 (C)** — status: active.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 1.1.12 |
| Published | 2026-04-13 |
| First published | 2023-01-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=20 |
| Dependencies | 1 |
| Unpacked size | 509.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | webdevrank |
| Maintainers | sarbajitbhattacharjee |

## Links

- npm: https://www.npmjs.com/package/rankrtc
- npm.io page: https://npm.io/package/rankrtc

## Dependencies (1)

- [@mediapipe/pose](https://npm.io/package/@mediapipe/pose.md) ^0.5.1675469404

## Recent versions

- 1.1.12 (latest) — 2026-04-13
- 1.1.11 — 2025-04-09
- 1.1.10 — 2025-03-31
- 1.1.9 — 2025-03-25
- 1.1.8 — 2025-03-24
- 1.1.7 — 2025-03-19
- 1.1.6 — 2025-03-19
- 1.1.5 — 2025-03-18
- 1.1.4 — 2025-03-18
- 1.1.3 — 2025-03-12
- 1.1.2 — 2025-03-10
- 1.1.1 — 2025-03-08
- 1.1.0 — 2025-03-05
- 1.0.21 — 2025-02-16
- 1.0.20 — 2025-02-15
- … 17 more at https://npm.io/package/rankrtc/versions

## README

# RankRTC React
React component to embed **Interact** conference into React application

## Installation

### NPM
```bash
npm install rankrtc
```

### Yarn
```bash
yarn add rankrtc
```

## Usage
```jsx
    import { RankRTC } from 'rankrtc';
    import 'rankrtc/dist/index.css';
  
    const config = {
      server: <Interact portal url>
    }
    const eventHandler = {
	    joinSuccess: async () => {},
	    joinFail: (event) => {},
	    leave: () => {},
	    publishSuccess: () => {},
	    publishFail: (event) => {},
	    participantJoined: (participant) => {},
	    participantLeft: (participant) => {},
	    participantListUpdated: (participants) => {},
	    recordingStarted: () => {},
	    recordingStopped: () => {},
	    videoMuted: () => {},
	    videoUnmuted: () => {},
	    audioMuted: () => {},
	    audioUnmuted: () => {},
	    shareStarted: () => {},
	    shareStopped: () => {},
	    shareFailed: () => {},
	    deviceUpdated: ({ audioInput, videoInput }) => {},
    }
    const  App  = () => {
	    return ( 
		    <div className='render'>
			    <RankRTC
				    displayName={"John Doe"}
			        roomName={1234}
			        configParams={config}
			        joinNow={true}
			        on={eventHandler}
		        />
			</div>
	    )
    }
    export default App
```

## Props
| Props | Required | Description |
|--     |--        |--           |
| displayName | True | Name of the participant to be displayed |
| roomName | True | Application generated roomId in number |
| userMeta | False | Application specific metadata of the user in JSON format |
| configParams| True | Configuration to Initialize conference |
| joinNow| True | Based on this parameter, conference will be joined. Keep it **false**. Whenever you want to start the conference, make it **true** |
| on | True | Callback notifications from the component. You'll receive events from the conference, to perform required tasks at application |

### configParams
Configuration to Initialize conference. Below are the parameters list.

| Params | Required | Description |
|--      |--        |--           |
| server | True | Portal/Proxy address of Interact |
| iceServers | False | Stun and Turn server details. You should use this, if you're behind NAT environment, i.e. corporate networks
| viewerOnly | False | This parameter defines, if the participant wants to be publisher or wants to view the conference only. Default is **false**. 

### on
Callback notifications from the component. All the handlers are required for now.
| Handler | Returns | Event |
|--       |--       |--           |
| joinSuccess |  | Conference join successful
| joinFail| event | Conference join failure |
| leave || Conference ended |
| publishSuccess|| Publishing of feed successful|
| publishFail| event | Publishing of feed failed |
| participantJoined| participant details | A new participant has joined |
| participantLeft| participant details | A participant has left |
| participantListUpdated| list of participants | Participant list has been updated due to joining/leaving of participant |
| recordingStarted|| Recording has been started in the room |
| recordingStopped|| Recording has been stopped in the room |
| deviceUpdated| { audioInput, videoInput } | Hardware device list updated |
| videoMuted|| Own camera has been muted |
| videoUnmuted|| Own camera has been unmuted |
| audioMuted|| Own mic has been muted |
| audioUnmuted|| Own mic has been unmuted |
| shareStarted|| Screen sharing started |
| shareStopped|| Screen sharing stopped |
| shareFailed|| Screen sharing start failed |

## API Functions
| Function | Argument(s) | Returns |
|--        |--           |--       |
| muteAudio | | Returns through event handler|
| muteVideo | | Returns through event handler|
| unmuteAudio | | Returns through event handler|
| unmuteVideo | | Returns through event handler|
| isAudioMuted | | True / False
| isVideoMuted | | True / False
| listParticipants | room id| Participants array
| hangup | | Returns through event handler|
| shareScreen | | Returns through event handler|
| stopShare | | Returns through event handler|
| changeCamera | | |
| changeMic | | |

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