Host Triggers JS For Participants - Clan Meeting

Host Triggers JS For Participants

host_triggers_js_for_participants

Execute JavaScript on the participant side when host clicks a button #

Firing custom code locally based on certain events is already covered in the previous sections of this documentation. This example covers two ways a host can fire custom JS on the participant side.

Edit the host page #

Set this property:


xxxxxxxxxx
1
1
overriddenToolbarButtons: ['chat']

Edit onload function as per the below snippet:


xxxxxxxxxx
34
1
window.onload = function () {
2
  meeting.start();
3

4
  const meetingJoinedLsnr = function meetingJoinedLsnr(localParticipant) {
5
    let isDataChannelOpen = false;
6

7
    // data channel opens when atleast 2 participants have joined a meeting
8
    meeting.once('dataChannelOpened', function () {
9
      isDataChannelOpen = true;
10
    });
11

12
    const buttonClickLsnr = function buttonClickLsnr(data) {
13
      if (data.key === 'chat' && data.preventExecution) {
14
        const allParticipants = meeting.get('allParticipants');
15

16
        if (allParticipants.length > 1 && isDataChannelOpen) {
17
          // send data to all other participants one by one
18
          allParticipants.forEach((participant) => {
19
            if (participant.participantId !== localParticipant.id) {
20
              const textData = 'Hello World';
21
              // JSON example
22
              // const textData = JSON.stringify({ key1: 'value1', key2: 'value2' });
23
              meeting.exec('sendDataToParticipant', participant.participantId, textData);
24
            }
25
          });
26
        }
27
      }
28
    };
29

30
    meeting.on('overriddenToolbarButtonClicked', buttonClickLsnr);
31
  };
32

33
  meeting.once('meetingJoined', meetingJoinedLsnr);
34
};

Edit the participant page #


xxxxxxxxxx
17
1
window.onload = function () {
2
  meeting.start();
3

4
  const meetingJoinedLsnr = function meetingJoinedLsnr(participant) {
5
    // event 2 - listen for data received from other participants
6
    meeting.on('dataReceived', function (data) {
7
      // add your custom JS here or execute Clan Meeting methods
8
      const receivedData = data.data.eventData.text;
9
      // JSON example
10
      // const receivedData = JSON.parse(data.data.eventData.text);
11
      window.alert(receivedData);
12
    });
13
  };
14

15
  // event 1
16
  meeting.once('meetingJoined', meetingJoinedLsnr);
17
};

Test #

Click on the chat button after the host and the participants have joined the call. When the host clicks the chat button, an alert is displayed to all the participants.

2. By using a newly created custom button outside of the meeting element #

Edit the host page #

Create a custom button. Example below:


xxxxxxxxxx
5
1
<div>
2
  <div style="width: 10%"><button id="my-custom-btn">Custom Button</button></div>
3
  <!-- Adjust size and position of video element here -->
4
  <div id="my-meeting" style="position: fixed; top: 0; bottom: 0; right: 0; height: 100%; border: none; margin: 0; padding: 0; overflow: hidden; z-index: 99; width: 90%;"></div>
5
</div>

Edit onload function as per the below snippet:


xxxxxxxxxx
33
1
window.onload = function () {
2
  meeting.start();
3

4
  const meetingJoinedLsnr = function meetingJoinedLsnr(localParticipant) {
5
    let isDataChannelOpen = false;
6

7
    // data channel opens when atleast 2 participants have joined a meeting
8
    meeting.once('dataChannelOpened', function () {
9
      isDataChannelOpen = true;
10
    });
11

12
    const buttonClickLsnr = function buttonClickLsnr(data) {
13
      const allParticipants = meeting.get('allParticipants');
14

15
      if (allParticipants.length > 1 && isDataChannelOpen) {
16
        // send data to all other participants one by one
17
        allParticipants.forEach((participant) => {
18
          if (participant.participantId !== localParticipant.id) {
19
            const textData = 'Hello World';
20
            // JSON example
21
            // const textData = JSON.stringify({ key1: 'value1', key2: 'value2' });
22
            meeting.exec('sendDataToParticipant', participant.participantId, textData);
23
          }
24
        });
25
      }
26
    };
27

28
    const customBtn = document.getElementById('my-custom-btn');
29
    customBtn.addEventListener('click', buttonClickLsnr);
30
  };
31

32
  meeting.once('meetingJoined', meetingJoinedLsnr);
33
};

Edit the participant page #


xxxxxxxxxx
17
1
window.onload = function () {
2
  meeting.start();
3

4
  const meetingJoinedLsnr = function meetingJoinedLsnr(participant) {
5
    // event 2 - listen for data received from other participants
6
    meeting.on('dataReceived', function (data) {
7
      // add your custom JS here or execute Clan Meeting methods
8
      const receivedData = data.data.eventData.text;
9
      // JSON example
10
      // const receivedData = JSON.parse(data.data.eventData.text);
11
      window.alert(receivedData);
12
    });
13
  };
14

15
  // event 1
16
  meeting.once('meetingJoined', meetingJoinedLsnr);
17
};

Test #

Click on the custom button after the host and the participants have joined the call. When the host clicks the custom button, an alert is displayed to all the participants.