RankRTC React

React component to embed Interact conference into React application

Installation

NPM

npm install rankrtc

Yarn

yarn add rankrtc

Usage

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