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
andjwt
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
11<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 #
x
1<script src="https://cdn.clanmeeting.com/releases/api/conferencing/v2.0.5/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
171<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
291
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.5/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>