Getting Started - Clan Meeting

Getting Started

getting_started

Pre-tasks #

Secure your website with a valid SSL certificate (unless testing locally). Without https, mic and camera permissions would be denied by the browser.
Get the domain, consumerId and jwt details from the email sent to you with the test credentials.
The below steps are for plain JavaScript integration with your web apps. For other integrations please check this section.

Add a meeting element #

Note: If you change the meeting element id, you need to pass the updated elementId as an optional argument.


xxxxxxxxxx
1
1
<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;"></div>

Import Clan Meeting #


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

Start meeting #

Pass domain, consumerId and a jwt (for host) as per the details shared with you by our team.


xxxxxxxxxx
17
1
<script>
2
    const domain = 'clanmeeting-domain';
3
    const consumerId = 'clanmeeting-consumer-id';
4
    const optionalProperties = {
5
        roomName: 'uniqueRoomName',
6
        displayName: 'Host',
7
        jwt: 'your-token'
8
    };
9
    const meeting = new ClanMeeting(domain, consumerId, optionalProperties);
10

11
    // Optionally, generate a random room name and anonymize the display name
12
    // Overwrites the values specified as arguments in line 4
13
    meeting.generateRoomName().anonymizeDisplayName();
14

15
    window.onload = function() { meeting.start(); };
16
    window.onunload = function() { meeting.end(); };
17
</script>

Example meeting page #

Here we are generating a random roomName and displayName but you could specify these details in optionalProperties.


xxxxxxxxxx
29
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;"></div>
7

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

10
    <script>
11
      // TODO: edit the domain, consumerId and jwt before using this code
12
      const domain = 'clanmeeting-domain';
13
      const consumerId = 'clanmeeting-consumer-id';
14
      const optionalProperties = {
15
          jwt: 'your-token',
16
      };
17
      const meeting = new ClanMeeting(domain, consumerId, optionalProperties);
18

19
      meeting.generateRoomName().anonymizeDisplayName();
20

21
      window.onload = function() {
22
        meeting.start();
23
      };
24
      window.onunload = function() {
25
        meeting.end();
26
      };
27
    </script>
28
  </body>
29
</html>