JavaScript und Typescript APIs

Introduction

The Veeting Blocks API lets you interact with the meeting room: mute a participant, read the participants list, listen for events, send custom events, and more.

After initializing Blocks, the only call you must make is joinMeeting(). It tells Blocks which meeting to join and whether to send audio and video.

The Veeting Blocks API is available in Typescript and in plain Javascript. The documentation below uses Typescript, but every API works the same way in Javascript.

The API becomes available once Blocks itself has finished initializing:

// 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())
        }
    });
}

Using this page with an AI assistant

If you are using an AI coding assistant, copy the text below into it and add a sentence describing what you want to build. AI assistants accessing this page receive a separate, token-optimized version of our full developer documentation, specifically tailored by our engineers for AI coding assistants.

Before writing any code, read this page:
https://www.veeting.com/de/veeting-blocks/apis

It documents the Veeting Blocks Javascript and Typescript API.
Keep these five rules in mind:

1. Ask me for my Veeting white label domain. Do not guess one.
2. Nothing on Blocks.api works before Blocks.init() has run and
   its initialized callback has fired. Wait for it.
3. Almost every method returns void. There is no return value and
   no error to catch. If the participant is not allowed to do the
   thing, the call is ignored silently. Do not write code that
   waits for a result.
4. Do not call a method as soon as "connected" fires. That event
   is about our websocket. Wait for "joined", which means the
   meeting itself has been entered.
5. Import the enums you use. MeetingRoomApiEvent and the I-types
   come from @veeting/blocks-loader, not from the global scope.

What I want to build:

Basics

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

Example

This example shows how to subscribe to 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 built around meetings. A meeting takes place in a room that participants join. The room opens at the meeting's start time. Regular meetings have a fixed end time that you can extend. The room of an ad-hoc meeting closes automatically once every participant has disconnected.

Participants can join while the room is open. During a break, a participant can disconnect and connect again later. When the meeting is over, participants leave it. Leaving removes the meeting context completely, so a user can join a different meeting without reloading the 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;

toggleMuteVideo(): void;

muteAudio(muted: boolean): void;

toggleMuteAudio(): 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;

getMediaDeviceAudioInputList(audioOnly: boolean): MediaDeviceInfo[];

getMediaDeviceAudioOutputList(audioOnly: boolean): MediaDeviceInfo[];

getMediaDeviceVideoInputList(audioOnly: boolean): MediaDeviceInfo[];

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

These input and output types are used by 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 if audio should be sent
    audio: boolean;
    // Set to true if 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";