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

getVersion(): string;

isBrowserSupported(): boolean;

loadMeeting(meetingId: string): Promise<IMeetingRoomConfig>

joinMeeting(connectionConfig: IMeetingConnectionConfig): Promise<void>

connect(mediaConfig?: { audio: boolean; video: boolean }): void;

disconnect(): void; 

restartMediaConnections(): void;

getParticipantsList(): IApiParticipant[];

enableFollowMe(enabled: boolean): void;

muteVideo(muted: boolean): void;

muteAudio(muted: boolean): void;

setVolume(volume: number, meetingParticipantId?: string): void;

setMediaStreamConstraints(mediaStreamConstraints: MediaStreamConstraints, merge?: boolean): void;

setDisplayMediaConstraints(displayMediaConstraints: MediaStreamConstraints, merge?: boolean): void;

setVideoInputDeviceId(deviceId: string, reconnect: boolean): void;

setAudioInputDeviceId(deviceId: string, reconnect: boolean): void;

setAudioOutputDeviceId(deviceId: string, reconnect: boolean): void;

setVideoResolution(resolution: MeetingRoomVideoResolution, reconnect: boolean): void;

getMediaDeviceSettings(): IMediaDeviceSettings;

setScreensharingInterceptor(callback: () => void): void;

startScreensharing(sourceId?: string): void;

stopScreensharing(): void;

startRecording(): void;

stopRecording(): void;

forceStopScreensharing(): void;

enterVideoFullscreen(): void;

sendChatMessage(message: string): void;

sendPrivateChatMessage(message: string, participantId: string): void;

sendCustomMessage(message: ICustomMessage): void;

leaveMeeting(): void;

setVideoDisplayCalculator(videoDisplayCalculator: IVideoDisplayCalculator): void;

can(meetingPermission: string): Promise<boolean>;

on(event: MeetingRoomApiEvent, callback: ApiEventCallback): void;

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";