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,consumerIdandjwtdetails 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.
xxxxxxxxxx11<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 #
xxxxxxxxxx11<script src="https://cdn.clanmeeting.com/releases/api/conferencing/v4/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.
xxxxxxxxxx171<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 name12 // Overwrites the values specified as arguments in line 413 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.
xxxxxxxxxx291<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/v4/dist/clanmeeting.min.js"></script>9
10 <script>11 // TODO: edit the domain, consumerId and jwt before using this code12 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>
