Veeting Blocks – Javascript and Typescript APIs

Introduction

The Veeting Blocks API allows you to interact with the meeting room. You may mute a participant, receive the participants list, listen to events and send custom events, etc.

The only code you must call after initializing Blocks is the joinMeeting() function. This will let Blocks know which meeting to join and whether you want to enable audio and video or not.

The Veeting Blocks API is available in Typescript and plain Javascript. The documentation below focuses on Typescript, however, all APIs are available in Javascript exactly the same way.

The Veeting Blocks API is loaded after initialization of the Veeting Blocks themselves:

// Configure the domain name of your Veeting white label instance
const whitelabelDomain = "webmeeting.example.com"

if (!Blocks.isInitialized()) {
    // Blocks.init() must only be called once!
    Blocks.init({
        version: "latest",
        whitelabelDomain: whitelabelDomain,
        initialized: async () => {
            // Veeting Blocks is initialized, the APIs are now available
            console.log(Blocks.api.getMediaDeviceSettings())
        }
    });
}

Basics

The APIs allow you to interact with a meeting, for instances to mute and unmute the user. You can also register for events with on(event: MeetingRoomApiEvent, callback: ApiEventCallback): void; and react upon them.

Example

This example code shows you how to wait for the meeting room to be ready, how to subscribe for meeting room events and how to call meeting room APIs:

Blocks.api.on(MeetingRoomApiEvent.beforeConnecting, (payload) => {
    console.log(`[Blocks API] - Received event 'beforeConnecting' with payload ${payload}`)
});

Blocks.api.on(MeetingRoomApiEvent.participantsUpdated, (payload) => {
    console.log(`[WLVMR API] - Received event 'participantsUpdated' with payload ${JSON.stringify(payload)}`)
});

Blocks.api.on(MeetingRoomApiEvent.chatMessage, (payload) => {
    console.log(`[WLVMR API] - Received event 'chatMessage' with payload ${JSON.stringify(payload)} `)
});

Blocks.api.muteAudio(true);
Blocks.api.muteVideo(true);
Blocks.api.setAudioInputDeviceId("default", false);
Blocks.api.setAudioOutputDeviceId("default", false);
Blocks.api.setVideoInputDeviceId("default", true);

Join meetings, connect, disconnect, leave meetings

Veeting is based on the concept of meetings. Meetings take place in rooms which the participants join. Meetings have a start date when the room opens. While regular meetings have a fixed (but extendable) end date, rooms of ad-hoc meetings close automatically after all users have disconnected.

While the room is open, participants can join the meeting. During breaks, participants can disconnect from the meeting and re-connect at a later time. Once the meeting is over participants leave the meeting. Leaving a meeting completely removes the meeting context. This allows users to join a different meeting without reloading all blocks.

Available APIs

API definitionDescription
getVersion(): string;
Returns the current Veeting version string, i.e. 6.11.0
isBrowserSupported(): boolean;
Returns true if the web browser supports WebRTC and Veeting Blocks, otherwise false
loadMeeting(meetingId: string): Promise<IMeetingRoomConfig>
Loads the meeting details of a meeting. Useful to check if the meeting room is currently open. It is not required to load the meeting prior to joining it.
joinMeeting(connectionConfig: IMeetingConnectionConfig): Promise<void>
Joins a meeting. See below for the details of IMeetingConnectionConfig
connect(mediaConfig?: { audio: boolean; video: boolean }): void;
Re-connects to the previously joined meeting after a disconnect(). Will be ignored if the user is currently connected. Users will automatically be connected when they join the meeting
disconnect(): void; 
Disconnects from the meeting without removing the meeting context. You will be able to connect() again later on. Will be ignored if the user is currently disconnected "connected" refers to the WebRTC streams only. Users can participate on the whiteboard even though they are disconnected
restartMediaConnections(): void;
Restarts the media connections, useful after device changes
getParticipantsList(): IApiParticipant[];
Returns the current participants list
enableFollowMe(enabled: boolean): void;
Enables follow me (requires moderator rights)
muteVideo(muted: boolean): void;
Mute and unmute outgoing video
muteAudio(muted: boolean): void;
Mute and unmute outgoing audio
setVolume(volume: number, meetingParticipantId?: string): void;
Sets the audio volume. The volume parameter needs to be a number value between 0 and 1. If no meetingParticipantId is provided the volume change is applied to all participants.
setMediaStreamConstraints(mediaStreamConstraints: MediaStreamConstraints, merge?: boolean): void;
Sets the media stream constraints for getUserMedia calls. If merge is true then mediaStreamConstraints will be merged with the internal constraints. The parameter merge defaults to true.
setDisplayMediaConstraints(displayMediaConstraints: MediaStreamConstraints, merge?: boolean): void;
Sets the display stream constraints for getDisplayMedia calls. If merge is true then displayMediaConstraints will be merged with the internal constraints. The parameter merge defaults to true.
setVideoInputDeviceId(deviceId: string, reconnect: boolean): void;
Sets the video input device. Note: the API does not verify if the device id's are valid
setAudioInputDeviceId(deviceId: string, reconnect: boolean): void;
Sets the audio input device. Note: the API does not verify if the device id's are valid
setAudioOutputDeviceId(deviceId: string, reconnect: boolean): void;
Sets the audio output device. At the moment only the Chrome and Edge browsers support this API. Note: the API does not verify if the device id's are valid.
setVideoResolution(resolution: MeetingRoomVideoResolution, reconnect: boolean): void;
Sets the main video resolution
getMediaDeviceSettings(): IMediaDeviceSettings;
Retrieves the currently selected media devices
setScreensharingInterceptor(callback: () => void): void;
Electron applications may want to intercept screensharing requests by users. This allows the Electron application to pre-select a device ID.
startScreensharing(sourceId?: string): void;
To be used with the screensharing interceptor, throws error if no interceptor set
stopScreensharing(): void;
To be used with the screensharing interceptor, throws error if no interceptor set
startRecording(): void;
works only if partially recorded is configured for this meeting (meeting.recordingType === 'partial')
stopRecording(): void;
works only if partially recorded is configured for this meeting (meeting.recordingType === 'partial')
forceStopScreensharing(): void;
Forcefully stop screensharing. Only allowed by a moderator. The event will be blocked by the server if called by a non-moderator
enterVideoFullscreen(): void;
Opens the video container in fullscreen. Note: This fails in most browsers except Google Chrome: entering fullscreen requires a user interaction
sendChatMessage(message: string): void;
Sends a group chat message
sendPrivateChatMessage(message: string, participantId: string): void;
Sends a private chat message to the participant with the ID participantId
sendCustomMessage(message: ICustomMessage): void;
Sends a custom message to all participants
leaveMeeting(): void;
Disconnects from the server and leaves the meeting room
setVideoDisplayCalculator(videoDisplayCalculator: IVideoDisplayCalculator): void;
Allows API users to define how the videos are displayed. See separate documentation for more details
can(meetingPermission: string): Promise<boolean>;
To query the Meeting Permissions service and check if a user is allowed to see a certain tool, for example "agenda.view", "screensharing.view", etc.
on(event: MeetingRoomApiEvent, callback: ApiEventCallback): void;
Event listener for meeting room events

Type definitions

The following input and output types are used to interact with the Javascript API

Interfaces

interface IMeetingConnectionConfig {
    // The meeting ID in the form of 0000-0000-0000-0000
    meetingId: string;
    // Optional, to make a user a moderator
    moderatorToken?: string;
    // Optional, for interpreters in multi-language-channel meetings
    interpreterToken?: string;
    // Optional, for silent participants
    invisibleToken?: string;
    // The name of the participant, visible to all participants
    participantName: string;
    // Optional, to receive the meeting summary
    participantEmail?: string;
    // Set to true of audio should be sent
    audio: boolean;
    // Set to true of video should be sent
    video: boolean;
}

interface IApiParticipant {
  id: string;
  name: string;
  joinedAt: number;
  muted?: boolean;
  handRaised?: boolean;
  fromPSTN?: boolean;
  hasVideo?: boolean;
  hadVideo?: boolean;
}

interface IApiChatMessage {
  fromParticipantId: string;
  fromParticipantName: string;
  message: string;
}

interface IApiRemainingTimeUpdate {
  remainingSeconds: number;
}

interface IScreenshareState {
  active: boolean;
}

interface IMediaDeviceSettings {
  videoResolution: string;
  audioInputDeviceId: string;
  audioOutputDeviceId: string;
  videoInputDeviceId: string;
}

interface IVideoPosition {
  participantId: string;
  width: number;
  height: number;
  top: number;
  left: number;
  zIndex: number;
  // Important: CSS class names MUST be prefixed with 'video-container-'
  cssClasses?: string[]
}

interface IVideoDisplayConfig {
  videoPositions: IVideoPosition[],
  hiddenContainers: boolean[]
}

interface IVideoDisplayCalculator {
  calculatePositions(
    containerWidth: number,
    containerHeight: number,
    secondaryPosition: SecondaryVideoPosition,
    secondaryDisplay: SecondaryDisplay,
    secondarySize: SecondaryVideoSize,
    primaryParticipants: string[],
    secondaryParticipants: string[],
    participantsOrder: string[],
    hasSelfView: boolean,
    isSelfviewInSecondary: boolean,
    isTVMode: boolean
  ): IVideoDisplayConfig;
}


interface IMeetingRoomConfig {
  isNamedRoom: boolean;
  meetingId: string;
  roomId: string;
  id: string;
  topic: string;
  meetingType: MeetingType;
  dialInEnabled: boolean;
  passwordProtected: boolean;
  hasVideo: boolean;
  startTime: number;
  endTime: number;
  isOpen: boolean;
  isPreOpen: boolean;
  isClosed: boolean;
  isActive: boolean;
  isDemoMeeting: boolean;
  isPromoMeeting: boolean;
  isFreeMeeting: boolean;
  isRecorded: boolean;
  isAccountValid: boolean;
  maxNumberOfParticipants?: number;
  organizerId: string;
  accountId: string;
  logoFileName?: string;
  disableLogs?: boolean;
  broadcastingEnabled?: boolean;
  participantsEmail?: Availability;
  authType?: MeetingRoomAuthType;
  meetingRoomLayout?: MeetingRoomLayout;
  joinMeetingSound?: string;
  leaveMeetingSound?: string;
  closingMeetingSound?: string;
  closedMeetingSound?: string;
}

interface ICustomMessage {
  from?: string;
  to?: string;
  data?: any;
  onlyToModerators?: boolean;
}

Enums

enum MeetingRoomApiEvent {
  beforeConnecting = "beforeConnecting",
  connected = "connected", // websocket to veeting API established and inuse
  joined = "joined", // veeting room ready for usage
  disconnected = "disconnected", // websocket to veeting API disconnected or unused
  leave = "leave",
  participantsUpdated = "participantsUpdated",
  chatMessage = "chatMessage",
  privateChatMessage = "privateChatMessage",
  meetingDurationUpdated = "meetingDurationUpdated",
  meetingRoomConfigUpdated = "meetingRoomConfigUpdated",
  customMessage = "customMessage",
  screenshareStateChange = "screenshareStateChange"
}

enum SecondaryVideoSize {
  small = 0.15,
  large = 0.5
}

enum MeetingRoomVideoResolution {
  "1280x960" = "1280x960",
  "1280x720" = "1280x720",
  "960x720" = "960x720",
  "960x540" = "960x540",
  "640x480" = "640x480",
  "640x360" = "640x360",
  "320x240" = "320x240",
  "320x180" = "320x180",
  "160x120" = "160x120"
}

enum MeetingType {
  standard = "standard",
  offTheRecord = "offTheRecord",
  boardroom = "boardroom",
  classroom = "classroom",
  audiobridge = "audiobridge"
}

enum MeetingRoomLayout {
  classic = "classic",
  presentation = "presentation",
  template = "template"
}

enum Availability {
  required = "required",
  optional = "optional",
  hidden = "hidden"
}

enum MeetingRoomAuthType {
  none = "none",
  invited = "invited",
  accountMember = "accountMember",
  platformMember = "platformMember",
  external = "external"
}

Types

type ApiEventCallback = (
  payload: void 
    | IApiParticipant[] 
    | IApiChatMessage 
    | IApiRemainingTimeUpdate 
    | IMeetingRoomConfig 
    | ICustomMessage 
    | IScreenshareState
  ) => void

type SecondaryVideoPosition = "none" | "left" | "top" | "right" | "bottom";
type SecondaryDisplay = "display" | "hidden";

Not sure how to best implement your project?

Contact our team to discuss the details.

+41 43 500 11 82
+1 646 583 2652