How to Trigger code to execute for all participants in a room

Hi ,
I am using self hosted jitsi-meet.I have added button inside conference room , so when user clicks on that button the corresponding code executes. But how can I modify it to work as follows:
'when any user clicks on the button the corresponding code should be executed to all participants in the room. ’
How can make this happen.?
Thanks in advance.

Hi,
It depends on the usecase that you are trying to solve. In general, all participants in the conference can be accessed by querying Redux state(jitsi-meet repo) something like this.

const participants = state['features/base/participants']

Also, jitsi-meet/react/features/base/participants contains lot of helper functions that you can use to achieve certain use cases.
The above code will be under jitsi-meet repository. But surely we can try to help if more information regarding the use case is provided.

Thank you

Hi @Aditya123
I just want to display some list names(to do list) for all participants when any one participant click update-list button. Can I trigger this function using _getAllParticipants function from …react/base/participants

It may be done using the text chat and the iFrame API. One participant send a message, the others cache it using incomingMessage event and update their lists.

iFrame API

Hi @emrah
I doubt if iframe is useful in my case. Anyways could you explain how text chat could be implemented with some example. That would be helpful.
Thanks.

You can possibly try with the way that groupchat has been implemented. If you look at jitsi-meet/react/features/chat/components/AbstractChat.js, it will give you the details on how to send a group message to everyone in the conference. This will ulimately calls lib-jiti-meet’s sendTextMessage function. This function sends the group message of the format something like this:
<body rid="340757764" sid="4035528c-c93d-4dfe-89d9-65cb4d5f3ee9" xmlns="http://jabber.org/protocol/httpbind"><message to="meeting_name@conference.instance.com" type="groupchat" xmlns="jabber:client"><body>THIS IS THE MESSAGE THAT GOES TO ALL THE PARTICIPANTS IN THE ROOM</body><nick xmlns="http://jabber.org/protocol/nick">participant_name</nick></message></body>

For your use case, you can customize the message while sending and upon receiving the message, you can handle it separetly if it is a customized message.

It’s possible to send an endpoint message by the sendEndpointTextMessage command. The format is like

api.executeCommand('sendEndpointTextMessage', 'receiverParticipantId', 'your endpoint message');
api.executeCommand('sendEndpointTextMessage', '', 'your endpoint message');

When the second param is an empty string, the message goes to all participants.

And it’s possible to catch the incoming endpoint message by the endpointTextMessageReceived event. The format is like

function your_function(e) {
   console.log(e);
   console.log(e.data.eventData.text);
}

api.addListener('endpointTextMessageReceived', your_function);

You can customize the function according to your needs.

@emrah @Aditya123
Thanks both,
I will try both methods and inform you guys.

@emrah

Hi, I tried the method you suggested. I have used api in componentDidMount() from toolbar.js. But I am getting error as “Cannot read property ‘JitsiMeetExternalAPI’ of undefined at At.componentDidMount”
This is my code:

   const script = document.createElement("script");
   const domain = 'https://meet.jit.si'; // I am using my domain name
   script.src = "https://meet.jit.si/external_api.js";
   script.async = true;
   document.body.appendChild(script);
   const options = {roomName: title};
   var api = new JitsiMeetExternalAPI(domain, options);
   api.addListener('endpointTextMessageReceived', this.receiveFile);

Can I know if there is mistake in this code.

Thank you

Simple working page…
When a participant changes the audio mute status (clicked the microphone), an endpoint message is sent.

<html>

<body>
    <div id="meet"></div>             
</body>

<script src='https://meet.jit.si/external_api.js'></script>
<script>
const domain = 'meet.jit.si';
const options = {                     
    roomName: 'api-test-room',
    width: '100%',
    height: '100%',
    parentNode: document.querySelector('#meet'),
    configOverwrite: {
        prejoinPageEnabled: false,
        requireDisplayName: true,
        startWithVideoMuted: true,
    },
    interfaceConfigOverwrite: {       
        DISABLE_VIDEO_BACKGROUND: true,
        DISABLE_JOIN_LEAVE_NOTIFICATIONS: true,
        HIDE_INVITE_MORE_HEADER: true,
    },                                
};                                    
const api = new JitsiMeetExternalAPI(domain, options);
                                      
function sendEndpointMessage(e) {     
    api.executeCommand('sendEndpointTextMessage', '',
                       'My audio mute status changed');
    console.log('The endpoint message sent');
}                                     
                                      
function incomingEndpointMessage(e) {
    console.log('endpointTextMessageReceived event occured');
    console.log(api._participants[e.data.senderInfo.id].displayName,
                'says', e.data.eventData.text);
    console.log(e);
}

api.addListener('audioMuteStatusChanged', sendEndpointMessage);
api.addListener('endpointTextMessageReceived', incomingEndpointMessage);
</script>
</html>

@emrah.
Thanks for the code. I know creating simple html page works using html. But my problem is I am trying this code in self hosted jitsi-meet.
I am using this code in react js application. The file is /opt/jitsi-meet/react/features/toolbar/components/web/toolbar.js.
Here is my complete code.

 class Toolbox extends Component<Props, State> { 
       constructor(props: Props) {
            super(props);
             this._onUpdateList=this._onUpdateList.bind(this);
       };

      componentDidMount() {
          const script = document.createElement("script");
           const domain = 'https://meet.jit.si';
           script.src = "https://meet.jit.si/external_api.js";
           script.async = true;
           document.body.appendChild(script);
           const options = {roomName: title}
           var api = new JitsiMeetExternalAPI(domain, options);
           api.addListener('endpointTextMessageReceived', this.receiveFile);*/
      }

    render() {
       <button onClick={this._onUpdateList}>Update list</button
    }

    _onUpdateList() {
           api.executeCommand('sendEndpointTextMessage', '', 'Message');
    }

     receiveFile(e){
      console.log(e);
      console.log(e.data.eventData.text);
   }
 }

As per my understanding jitsi API is used embed jitsi-meet in an application but, can it be implemented in self hosted jitsi with already working conference . If this works. I dont want to create new conference room. I just want to send message in already existing conference room.

Thanks for your help. Let me know if this works in self hosted jitsi.

@Aditya123
I tried using send message but as soon as i click on button its redirecting to homepage.
Here is my code

import type { Dispatch } from 'redux';
import { ChatCounter, toggleChat, sendMessage } from '../../../chat';
class Toolbox extends Component<Props, State> { 
   constructor(props: Props) {
        super(props);
         this._onUpdateList=this._onUpdateList.bind(this);
   };
  render() {
   <button onClick={this._onUpdateList}>Update list</button
}
_onUpdateList(event) {
       event.preventDefault();
        dispatch(sendMessage("message"));
}

Please tell if there is mistake here. And I donno how to handle incoming message. Should i use ComponentDidMount(), or function. Please guide me on this.

Thank you.

I didn’t work with react before therefore I have no info about it.

It’s possible to use it in your self-hosted jitsi with an already working conference. Use your hostname as domain and the already working conference as roomName

If your client is a participant of an already existing room, it can send the endpoint messages to the other participants.

Hi, have you managed to solve it?

I’m working on a custom feature that also needs to implement some react code.

From my experience working with jitsi code (it goes only to the last 3 days), when the conference interface redirects you to the home page, it’s because an error happened when an error is thrown.