Connect Participants - Clan Meeting

Connect Participants

connect_participants

Setup #

A room name has to be unique per consumer only. It does NOT need to be globally unique (across all consumers).

Assign a unique room name to each meeting and store it in the database.

You can either generate alphanumeric room names yourself or use the existing generateRoomName() method as follows.


xxxxxxxxxx
7
1
const newMeeting = new ClanMeeting(domain, consumerId);
2

3
// Generates a 10 character alphanumeric room name.
4
newMeeting.generateRoomName();
5

6
// Save this roomName in your database against this meeting / course / session etc.
7
const roomName = newMeeting.roomName;

Example meeting page with join button #

Remember to fetch the roomName for the meeting that a participant is trying to join, from your database.

Hosts and participants passing the same roomName will join the same meeting. Host has to pass the jwt additionally.


xxxxxxxxxx
38
1
<!DOCTYPE html>
2
<html>
3
  <head></head>
4
  <body>
5

6
    <div id="my-meeting" style="position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; margin: 0; padding: 0; overflow: hidden; z-index: 99; display: flex; justify-content: center; align-items: center;">
7
      <button id="meeting-btn" style="background-color: #008CBA; border: none; color: white; padding: 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;">Join Meeting</button>  
8
    </div>
9

10
    <script src="https://cdn.clanmeeting.com/releases/api/conferencing/v2.0.10/dist/clanmeeting.min.js"></script>
11

12
    <script> 
13
      const optionalProperties = {
14
        // TODO: Get roomName from DB
15
        roomName: roomNameFromDB(),
16
        displayName: 'John Doe',
17
        // TODO: Pass a token here to enable host privileges
18
        jwt: '',
19
      };
20

21
      // TODO: set domain and consumerId
22
      const domain = 'clanmeeting-domain';
23
      const consumerId = 'clanmeeting-consumer-id';
24
      const meeting = new ClanMeeting(domain, consumerId, optionalProperties);
25

26
      window.onload = function() {
27
        const btn = document.getElementById('meeting-btn');
28
        btn.addEventListener('click', function() {
29
          btn.remove();
30
          meeting.start();
31
        });
32
      };
33
      window.onunload = function() {
34
        meeting.end();
35
      };
36
    </script>
37
  </body>
38
</html>