Schedule Meetings - Clan Meeting

Schedule Meetings

schedule_meetings

Before you proceed, please read how to connect participants in a meeting.

For the scheduled meetings, store the meeting start datetime along with the room name in your database.

Example scheduled meeting #

Join Button will be enabled only after the scheduled meeting start time.

Optionally, you can also set nbf (not before timestamp) while generating the JWT for the host. Authentication will fail if the host tries to join before the specified timestamp in this case. Read more


xxxxxxxxxx
52
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 join as host
18
        jwt: '',
19
      };
20

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

26
      window.onload = function() {
27
      const btn = document.getElementById('meeting-btn');
28

29
      // TODO: Get start datetime from the DB for this meeting
30
      // e.g. '2024-02-17 09:59:59' or any valid JavaScript date time format
31
      const startsAt = startDateTimeFromDb();
32

33
      // Check if it is time yet for the scheduled meeting
34
      if(meeting.isInFuture(startsAt)) {
35
        // Disable the button
36
        btn.disabled = true;
37
        btn.style.background = 'grey';
38
        btn.style.cursor = 'not-allowed';
39
      } else {
40
          btn.addEventListener('click', function() {
41
            btn.remove();
42
            meeting.start();
43
          });
44
        }
45
      }
46

47
      window.onunload = function() {
48
        meeting.end();
49
      }
50
    </script>
51
  </body>
52
</html>