Creates a custom button called "Capture Screenshot". Captures a screenshot of what's visible on stage and downloads to the user's computer when this button is clicked.
Use Cases #
Video KYC – Screenshot of customers holding identity documents
HR Management System – Save candidate photo from live video
LMS – Note taking
Complete Example #
Please update your domain, consumerId and JWT.
xxxxxxxxxx591<html>3 <head></head>4 <body>5 <div>6 <div style="width: 10%"><button id="my-custom-btn">Capture Screenshot</button></div>7 <!-- Adjust size and position of video element here -->8 <div id="my-meeting" style="position: fixed; top: 0; bottom: 0; right: 0; height: 100%; border: none; margin: 0; padding: 0; overflow: hidden; z-index: 99; width: 90%;"></div>9 </div>10
11 <script src="https://cdn.clanmeeting.com/releases/api/conferencing/v2.0.8/dist/clanmeeting.min.js"></script>12 <script>13 // Update your domain, consumerId and JWT here14 const meeting = new ClanMeeting('your-domain', 'your-consumerId', {15 roomName: '1234',16 displayName: 'Host',17 jwt: 'your-jwt',18 });19 window.onload = function () {20 meeting.start();21
22 const meetingJoinedLsnr = function meetingJoinedLsnr(participant) {23 const roleChangedLsnr = function roleChangedLsnr(event) {24 const buttonClickLsnr = function buttonClickLsnr(data) {25 meeting.execAsync('captureStageScreenshot').then((data) => {26 const blob = data.dataURL;27 if (!blob) {28 window.alert(29 'Nothing to capture yet. Atleast one participant should switch on camera or share screen to capture screenshot.',30 );31 return;32 }33
34 const link = document.createElement('a');35 const timestamp = +new Date();36 link.download = 'screenshot-' + timestamp + '.png';37 link.href = blob;38 document.body.appendChild(link);39 link.click();40 document.body.removeChild(link);41 });42 };43
44 const customBtn = document.getElementById('my-custom-btn');45 customBtn.addEventListener('click', buttonClickLsnr);46 };47
48 meeting.once('roleChanged', roleChangedLsnr);49 };50
51 meeting.once('meetingJoined', meetingJoinedLsnr);52 };53
54 window.onunload = function () {55 meeting.end();56 };57 </script>58 </body>59</html>
