    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