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

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">
          startWithAudioMuted: true,
          startWithVideoMuted: 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) => {
 = "100vh";

Can anyone please help how can I achieve these functionalities?

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

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) => {



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