How can we get the participants information like number of participants, roles/user type of each participants in React SDK?

Developers
,
1

we’ve self-hosted jitsi server. in our application, we’ve 3 types of user personas. Guest,
login user, and webinar user. Based on user persona we’ve to restrict some of jitsi functionality.

If the user is a guest, the maximum participate limit should be 5.

if a user is a login user, then he can use all the jitsi features that we’ve.

if a user is webinar and role is moderator then only moderators should share screen, mute/unmute, etc. other users can only see and can not perform any action.

We want all these features programmatically and not from the server side.

we are using React SDK

    <div className="App">
      <JitsiMeeting
        domain={process.env.REACT_APP_DOMAIN_NAME}
        roomName={'random'}
        configOverwrite={{
          startWithAudioMuted: true,
          startWithVideoMuted: true,
        }}
        interfaceConfigOverwrite={{
          DISABLE_JOIN_LEAVE_NOTIFICATIONS: true,
        }}
        onApiReady={(externalApi) => {
          // here you can attach custom event listeners to the Jitsi Meet External API
          // you can also store it locally to execute commands
        }}
        getIFrameRef={(iframeRef) => {
          iframeRef.style.height = "100vh";
        }}
      />

Can anyone please help how can I achieve these functionalities?

2

You can use the onApiReady handler to add listeners for the iframe API events and then take action based on your logic: IFrame API | Jitsi Meet

3

Can you please provide me an example of using externalAPI with some function or event in react SDK?

I have tried this way but i am not getting any output

And another question, when will this onApiReady execute, and will it execute again on any event?

    onApiReady={(externalApi) => {

    console.log(externalApi.getParticipantsInfo())
    externalApi.addListener('toggleAudio',(event)=>{console.log({event})})

        }}
4

onApiReady will be called once when ready, so you should add handlers there, or perhaps save it in the parent component if you want.

A simple example would be to add a listener for the conference joined event. Do you see it?

1 Like