Video API

Clan Meeting - Video API

Introduction

Most businesses around the world are moving away from conventional methods of interacting with their customers and adapting to technology, which is the need of the hour for sustenance. One such shift is to integrate your business with video conferencing. It increases the ease of doing business while reducing the operating costs by a huge margin.

With any such bold business decision, there are technical challenges even for the technology companies to overcome. For situations like these, you can easily integrate Clan Meeting with your applications using our video API. You can be up and running doing what you do best within a few minutes.

Why us?

Here are a few reasons to choose Clan Meeting API for your video conferencing needs:

Hassle Free Superfast Setup: The primary reason. So that you can spend your time and energy into growing your business.
Hosting In Own Region: We have servers primarily in India. However, please check with us and we can try to provide access on a location nearest to you.
Scalability & Stability : To handle the sudden influx in the number of customers or being ready for a campaign.
Own Branding : You can have your own logo within the video conferencing call.
Fresh Look : With a cleaner user interface.
Customization : Need your video recordings to be saved to your SFTP server instead? We can make that happen. Want a dedicated instance? We can set you up with that.
Feature Restrictions : Enable certain video conferencing features only? Yes, possible.
Integration Assistance : We are there to assist your dev team in case you need any help with the integration.
Pay As You Grow : Pay only as per your requirements and usage.
Lowest Rates : Our rates are a lot cheaper than our competitors.
Free Mobile Apps : Make use of Clan Meeting mobile apps to connect to the meetings for a smoother experience without any extra charges.

Installation and Initial Setup (Test Environment)

Integrate with our test environment within minutes to test your applications.

Test environment is open to all and could be rebooted without notice. So, please do not use it with your live applications. Please contact us for production access or for any issues during test integration.

Create API Object

Our API’s are powered by Jitsi Meet so that you can integrate Clan Meeting with your application.

Include the below script tags just before ending body tag on the page where you want to enable video conferencing.

Please add your own brand name below in lowercase without spaces into the myBrandName variable.


x
1
<script src="https://try.clanmeeting.com/external_api.js"></script>
2

3
<script>
4
    // TODO: update brand name
5
    // e.g. const myBrandName = "colacoca"
6
    const myBrandName = "yourbrandnamehere";
7
    
8
    const domain = "try.clanmeeting.com/" + myBrandName;
9
    
10
    const options = {
11
        roomName: "jhfd9283kjsd",
12
        <parameter2>: <value>,
13
        <parameter3>: <value>,
14
    };
15
    
16
    const api = new JitsiMeetExternalAPI(domain, options);
17
    
18
    window.addEventListener('unload', (event) => {
19
        api.dispose()
20
        console.log('Clan Meeting API disposed')
21
    });
22
</script>

Complete Basic Example

Please add your own brand name below in lowercase without spaces into myBrandName variable and save the code into an HTML file.

If you are testing the file locally no problem. Otherwise, please ensure that you are on https and have a valid certificate installed on your website. Camera and microphone will not work on insecure channels.


xxxxxxxxxx
61
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <!-- Responsiveness on smaller devices -->
5
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
6
  </head>
7
  <body>
8
    <!-- Your code here -->
9

10
    <!-- Adjust height, width and position of video element here -->
11
    <div id="mydiv" 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>
12

13
    <script src="https://try.clanmeeting.com/external_api.js"></script>
14

15
    <script>
16
      // ***** UPDATE THIS *****
17
      // e.g. const myBrandName = "colacoca"
18
      const myBrandName = 'yourbrandnamehere'
19

20
      const domain = 'try.clanmeeting.com/' + myBrandName
21

22
      const options = {
23
        roomName: 'complexAlphaNumericRoomName',
24
        parentNode: document.querySelector('#mydiv'),
25
        configOverwrite: {
26
          // Mic should be on or off while joining meeting
27
          startWithAudioMuted: true,
28
          // Video on or off while joining meeting
29
          startWithVideoMuted: true,
30
          // Whether to show prejoin page where participants can enter their name
31
          // and select their own camera/mic preferences.
32
          prejoinPageEnabled: false,
33
          // If set to false, user will be asked whether they want to use
34
          // Clan Meeting mobile app (for clients who do not have their own mobile apps)
35
          disableDeepLinking: true,
36
          // Remove the ones that you do not need
37
          toolbarButtons: [
38
            'microphone', 'camera', 'closedcaptions', 'desktop', 'embedmeeting', 'fullscreen', 'fodeviceselection', 'hangup', 'profile', 'chat', 'recording', 'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand', 'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts', 'tileview', 'select-background', 'download', 'help', 'mute-everyone', 'mute-video-everyone', 'security', 'toggle-camera',
39
          ],
40
        },
41
        userInfo: {
42
          displayName: 'John Doe',
43
        },
44
      }
45

46
      const api = new JitsiMeetExternalAPI(domain, options)
47

48
      window.addEventListener('unload', (event) => {
49
        api.dispose()
50
        console.log('Clan Meeting API disposed')
51
      })
52
    </script>
53
  </body>
54
</html>

How to connect users into an on-demand or scheduled conference?

Users passing the same roomName as an option will join the same meeting. As simple as that!

Once you have tried the above HTML file, you would notice that there is a mandatory roomName option to be passed. It accepts alphabets, numbers and dashes (-). You can dynamically generate a UNIQUE room name and pass it as an option above.

For on-demand conferences, this room name could be generated on the fly while creating a meeting. For scheduled conferences you can create a room name while scheduling and store it in the database. As long as room name is unique, it will not clash with other conferences.

Looking for an even simpler integration with your own branding?

If you do not want to control or hide any of the meeting options programmatically, don’t care about any JavaScript and are happy with what is available on our "Try Now" page, all you need is to create a meeting link as follows and open it in a new tab when a button is clicked on your website.

https://try.clanmeeting.com/yourBrandName/uniqueRoomName

Example meeting links:

https://try.clanmeeting.com/colacoca/marketing-room

https://try.clanmeeting.com/colacoca/personal-room-empid-19479

Contact us and we can quickly set you up with authentication on production environment so that your rooms are protected from outside world. Also, with your own Logo.

Clan Meeting on Mobile

The same code can be executed on mobile browser directly OR you can use our android and iOS apps free of cost to host the meetings.

If you need to integrate video API within your mobile app, you would need to execute JavaScript code within the app. For example, using WebView in case of React Native and Flutter.

### End of integration with basic options – Read on for further options ###

Authentication and Own Branding

Once you are happy with test integration, please contact us and we will set you up on production environment with authentication and your own branding.

Hang up the call for local participant

Please note that there is no direct way to end the meeting for everyone. Calling this command will hang up meeting for the local participant only. But you can extend the example below by combining different event listeners to solve your use case.


xxxxxxxxxx
1
1
api.executeCommand('hangup');

Use Case – Doctor and patient one-to-one meeting app

Doctor Code

Paste the basic example on the page where video conferencing will take place. Generate a unique room name when doctor initiates a call. Store room name in database against this call ID. Redirect doctor to video conferencing page and pass roomName into the options variable.

Patient Code

Create a similar page for the patient side. When the patient is notified, redirect them to this page by fetching the roomName from database. You can hide / show buttons differently on the patient side.

What if you don’t handle patient logic within your app?

In case you do not handle patient logic within your app, patient can still join using meeting link directly via desktop browser / mobile browser / Clan Meeting mobile apps. This can also help you build an MVP and reduce your go to market time by coding just the doctor side and notifying patient with the meeting link over SMS (example).

Hang up the call for doctor (local participant) if patient (remote participant) hangs up

Do not use this code as is for more than 2 participant meetings. Otherwise meeting will end for everyone even if one person disconnects.


xxxxxxxxxx
7
1
const remoteParticipantLeft = () => {
2
    // End the call for local participant also
3
    api.executeCommand('hangup');
4
    // Route this local participant to whichever page you want
5
    window.location = "path/to/homepage"
6
};
7
api.on('participantLeft', remoteParticipantLeft);

All meeting options


xxxxxxxxxx
58
1
const options = {
2
  roomName: 'complexAlphaNumericRoomName',
3
  parentNode: document.querySelector('#mydiv'), // HTML element to place the meeting
4
  onload: doStuff(), // Callback function to trigger on meeting load
5
  userInfo: {
6
    email: 'example@email.com',
7
    displayName: 'John Doe', // Displayed to other participants in the meeting
8
  },
9
  configOverwrite: {
10
    startWithAudioMuted: true, // intial mic status
11
    startWithVideoMuted: true, // initial camera status
12
    startAudioOnly: false, // start the meeting without any video (low-bandwidth mode)
13
    prejoinPageEnabled: false, // prejoin page enabled or disabled
14
    disableDeepLinking: true, // set to false if you want to make use of Clan Meeting mobile apps
15
    requireDisplayName: true, // make display name mandatory
16
    hideLobbyButton: true,
17
    enableInsecureRoomNameWarning: true, // show a warning button if room name is not complex enough
18
    remoteVideoMenu: {
19
      disableKick: true, // this is a moderator privilege
20
    },
21
    startScreenSharing: false, // try starting the meeting with screen sharing instead of video
22
    subject: ' ', // subject of the meeting
23
    hideConferenceSubject: true, // set to false if setting a subject
24
    // Remove the toolbar buttons that you do not need
25
    toolbarButtons: [
26
      'microphone',
27
      'camera',
28
      'closedcaptions', // transcription
29
      'desktop', // screen sharing
30
      'embedmeeting',
31
      'fullscreen',
32
      'fodeviceselection',
33
      'hangup', // end call button
34
      'profile',
35
      'chat',
36
      'recording', // remove if using Standard plan
37
      'livestreaming', // remove if using Standard plan
38
      'etherpad', // whiteboard
39
      'sharedvideo', // YouTube video sharing
40
      'settings',
41
      'raisehand',
42
      'videoquality',
43
      'filmstrip',
44
      'invite',
45
      'feedback',
46
      'stats',
47
      'shortcuts',
48
      'tileview',
49
      'select-background', // virual background
50
      'download', // download apps
51
      'help',
52
      'mute-everyone',
53
      'mute-video-everyone',
54
      'security',
55
      'toggle-camera', // enable this to get an extra button on mobile browsers
56
    ],
57
  },
58
}

Getters


xxxxxxxxxx
29
1
// Participants info
2
api.getParticipantsInfo()
3

4
// Current video quality setting
5
api.getVideoQuality()
6

7
// Number of participants in the meeting
8
api.getNumberOfParticipants()
9

10
// Avatar URL for a participant
11
api.getAvatarURL(participantId)
12

13
// Display name
14
api.getDisplayName(participantId)
15

16
// Email
17
api.getEmail(participantId)
18

19
// Available devices
20
api.getAvailableDevices().then((devices) => {
21
  // devices = {}
22
  // Do stuff
23
})
24

25
// Currently selected devices
26
api.getCurrentDevices().then((devices) => {
27
  // devices = {}
28
  // Do stuff
29
})

Checks


xxxxxxxxxx
34
1
// Is audio muted for local participant?
2
api.isAudioMuted().then((muted) => {
3
  // Do stuff
4
})
5

6
// Is video muted for local participant?
7
api.isVideoMuted().then((muted) => {
8
  // Do stuff
9
})
10

11
// Is audio available?
12
api.isAudioAvailable().then((available) => {
13
  // Do stuff
14
})
15

16
// Is video available?
17
api.isVideoAvailable().then((available) => {
18
  // Do stuff
19
})
20

21
// Is device change available?
22
api.isDeviceChangeAvailable(deviceType).then((isDeviceChangeAvailable) => {
23
  // Do stuff
24
})
25

26
// Is device list available?
27
api.isDeviceListAvailable().then((isDeviceListAvailable) => {
28
  // Do stuff
29
})
30

31
// Is multiple audio input supported?
32
api.isMultipleAudioInputSupported().then((isMultipleAudioInputSupported) => {
33
  // Do stuff
34
})

Commands


xxxxxxxxxx
40
1
api.executeCommand('hangup') // hangs up the call for local participant only
2

3
api.executeCommand('displayName', 'Jane Doe')
4

5
api.executeCommand('email', 'example@example.com')
6

7
api.executeCommand('subject', 'New Conference Subject')
8

9
api.executeCommand('toggleAudio')
10

11
api.executeCommand('toggleVideo')
12

13
api.executeCommand('toggleChat')
14

15
api.executeCommand('toggleShareScreen')
16

17
api.executeCommand('toggleTileView')
18

19
api.executeCommand(
20
  'avatarUrl',
21
  'https://publically/accessible/compressed/image'
22
)
23

24
api.executeCommand('setLargeVideoParticipant', participantId)
25

26
api.resizeLargeVideo(width, height)
27

28
api.pinParticipant(participantId)
29

30
api.captureLargeVideoScreenshot().then((dataURL) => {
31
  // save screenshot
32
})
33

34
// Commands that need moderator access
35
api.on('participantRoleChanged', function (event) {
36
  if (event.role === 'moderator') {
37
    api.executeCommand('toggleLobby', true)
38
    api.executeCommand('muteEveryone')
39
  }
40
})

Set audio / video devices


xxxxxxxxxx
5
1
api.setAudioInputDevice(deviceLabel, deviceId)
2

3
api.setAudioOutputDevice(deviceLabel, deviceId)
4

5
api.setVideoInputDevice(deviceLabel, deviceId)

Listen for events

You can add event listeners to using the EventEmitter methods. These are helpful if you want a particular business logic in case of certain events.

How to use


xxxxxxxxxx
39
1
/** 
2
* The eventName parameter is a String object with the name of the event.
3
* The listener parameter is a Function object that will
4
* be notified when the event occurs with data related to the event.
5
**/
6

7
// Triggers every time an event is emitted
8
api.on(eventName, listener);
9

10
// Triggers only once even if the event occurs multiple times
11
api.once(eventName, listener);
12

13
// Remove specific listeners one by one
14
api.off(eventName, listener);
15

16
// or at once by specifying the names
17
api.removeAllListeners([eventName1, eventName2 ...]);
18

19
// Example
20

21
</script>
22
  // Rest of the code from basic example above
23
  
24
  const localUserLeft = (response) => {
25
    // Add your custom logic here
26
    console.log(response);
27
  };
28
  
29
  // Add listener (use once if you want to emit it only once)
30
  api.on('videoConferenceLeft', localUserLeft);
31

32
  // Remove listeners on page unload and dispose API
33
  window.addEventListener('unload', (event) => {
34
    api.removeAllListeners(['videoConferenceLeft']);
35
    api.dispose();
36
    console.log('Clan Meeting API disposed');
37
  });
38
</script>

Local participant events

These are emitted by local participant.


xxxxxxxxxx
117
1
const localParticipantEvents = [
2
  {
3
    name: 'videoConferenceJoined', // this is the event name
4
    description: 'Participant has joined the meeting',
5
    response: {
6
      roomName: String, // room name joined
7
      id: String, // id of local participant
8
      displayName: String, // display name of local participant
9
      avatarURL: String,
10
    },
11
  },
12

13
  {
14
    name: 'videoConferenceLeft',
15
    description: 'Participant has left the meeting',
16
    response: {
17
      roomName: String, // room name left
18
    },
19
  },
20

21
  {
22
    name: 'micError',
23
    description: 'Issues with microphone access',
24
    response: {
25
      type: String, // error type
26
      message: String, // error message
27
    },
28
  },
29

30
  {
31
    name: 'cameraError',
32
    description: 'Failed to access camera',
33
    response: {
34
      type: String, // error type
35
      message: String, // error message
36
    },
37
  },
38

39
  {
40
    name: 'screenSharingStatusChanged',
41
    description: 'Participant toggled screen sharing',
42
    response: {
43
      on: Boolean, // screen sharing is on or off
44
      details: {
45
        sourceType: String | undefined,
46
      },
47
    },
48
  },
49

50
  {
51
    name: 'audioMuteStatusChanged',
52
    description: 'Audio mute status changed',
53
    response: {
54
      muted: Boolean, // new audio mute status
55
    },
56
  },
57

58
  {
59
    name: 'videoMuteStatusChanged',
60
    description: 'Video mute status changed',
61
    response: {
62
      muted: Boolean, // new video muted status
63
    },
64
  },
65

66
  {
67
    name: 'tileViewChanged',
68
    description: 'Tile view toggled',
69
    response: {
70
      enabled: Boolean, // tile view displayed or not
71
    },
72
  },
73

74
  {
75
    name: 'chatUpdated',
76
    description: 'Chat status toggled',
77
    response: {
78
      isOpen: Boolean, // chat panel open or not
79
      unreadCount: Number, // unread message counter
80
    },
81
  },
82

83
  {
84
    name: 'incomingMessage',
85
    description: 'Incoming chat message',
86
    response: {
87
      from: String, // who sent the message
88
      nick: String, // nickname of the user
89
      privateMessage: Boolean, // whether private or group message
90
      message: String, // text of the message
91
    },
92
  },
93

94
  {
95
    name: 'outgoingMessage',
96
    description: 'Outgoing message sent by local participant',
97
    response: {
98
      message: String, // text of the message
99
      privateMessage: Boolean, // where private or group message
100
    },
101
  },
102

103
  {
104
    name: 'deviceListChanged',
105
    description: 'Device list changed',
106
    response: {
107
      devices: Object, // the new list of available devices
108
    },
109
  },
110

111
  {
112
    name: 'suspendDetected',
113
    description: 'Suspended events detected in the host computer',
114
    response: null,
115
  },
116
]
117

Remote (Global) participant events

These are not dependent on local participant actions. Could be emitted by any participant and can be listened on by the local participant.


xxxxxxxxxx
101
1
const globalParticipantEvents = [
2
  {
3
    name: 'participantJoined',
4
    description: 'Participant joined the meeting',
5
    response: {
6
      id: String, // id of the participant
7
      displayName: String, // display name of the participant
8
    },
9
  },
10

11
  {
12
    name: 'participantLeft',
13
    description: 'Participant left the meeting',
14
    response: {
15
      id: String, // id of the participant that left
16
    },
17
  },
18

19
  {
20
    name: 'readyToClose',
21
    description:
22
      'All participants have hanged up the call. Meeting ready to close.',
23
    response: null,
24
  },
25

26
  {
27
    name: 'contentSharingParticipantsChanged',
28
    description: 'Screen sharing participant list updated',
29
    response: {
30
      data: Array, // participant IDs
31
    },
32
  },
33

34
  {
35
    name: 'largeVideoChanged',
36
    description: 'Large video changed',
37
    response: {
38
      id: String, // participant ID on large video (on stage)
39
    },
40
  },
41

42
  {
43
    name: 'dominantSpeakerChanged',
44
    description: 'Dominant speaker changed',
45
    response: {
46
      id: String, // participant ID
47
    },
48
  },
49

50
  {
51
    name: 'raiseHandUpdated',
52
    description: 'A participant raised/lowered the hand',
53
    response: {
54
      id: String, // participant ID
55
      handRaised: Boolean, // hand raised or lowered
56
    },
57
  },
58

59
  {
60
    name: 'displayNameChange',
61
    description: 'Display name changed',
62
    response: {
63
      id: String, // id of the participant who changed their display name
64
      displayname: String, // new display name
65
    },
66
  },
67

68
  {
69
    name: 'emailChange',
70
    description: 'Email changed',
71
    response: {
72
      id: String, // the id of the participant who changed their email
73
      email: String, // the new email
74
    },
75
  },
76

77
  {
78
    name: 'participantKickedOut',
79
    description: 'A participant was kicked out',
80
    response: {
81
      kicked: {
82
        id: String, // the id of the participant removed from the room
83
        local: Boolean, // whether or not the participant is the local particiapnt
84
      },
85
      kicker: {
86
        id: String, // the id of the participant who kicked out the other participant
87
      },
88
    },
89
  },
90

91
  {
92
    name: 'participantRoleChanged',
93
    description: 'Participant role changed',
94
    response: {
95
      id: String, // participant ID
96
      role: String, // new role = none | moderator | participant
97
    },
98
  },
99
  
100
]
101

Dispose API and remove event listeners before page unload


1
window.addEventListener('unload', (event) => {
2
    api.removeAllListeners(['eventName1','eventName2']);
3
    api.dispose();
4
    console.log('Clan Meeting API disposed');
5
});