# JavaScript und Typescript APIs
Source: https://www.veeting.com/de/veeting-blocks/apis
- [Veeting Blocks Introduction](/de/veeting-blocks/introduction)
- [Veeting Blocks Components](/de/veeting-blocks/components)
- [Javascript and Typescript APIs](#)
- [Introduction](#introduction)
- [Using this page with an AI assistant](#using-this-page-with-an-ai-assistant)
- [Basics](#basics)
- [Example](#example)
- [Join meetings, connect, disconnect, leave meetings](#join-meetings-connect-disconnect-leave-meetings)
- [Available APIs](#available-apis)
- [Type definitions](#type-definitions)
- [Interfaces](#interfaces)
- [Enums](#enums)
- [Types](#types)
## 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:
```Typescript
// 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.
```text
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:
```Typescript
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
| API definition | Description |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| getVersion(): string;
| Returns the current Veeting version string, for example 6.11.0 |
| isBrowserSupported(): boolean;
| Returns true if the web browser supports WebRTC and Veeting Blocks, otherwise false |
| loadMeeting(meetingId: string): Promise
| Loads the details of a meeting, for example to check whether the room is currently open. You do not have to load a meeting before joining it. |
| joinMeeting(connectionConfig: IMeetingConnectionConfig): Promise
| Joins a meeting. See below for the details of IMeetingConnectionConfig |
| connect(mediaConfig?: { audio: boolean; video: boolean }): void;
| Reconnects to the previously joined meeting after a disconnect(). Ignored if the user is already connected. Joining a meeting connects the user automatically. |
| disconnect(): void;
| Disconnects from the meeting without removing the meeting context, so you can call connect() again later. Ignored if the user is already disconnected. Here "connected" refers to the WebRTC streams only: a disconnected user can still work on the whiteboard. |
| restartMediaConnections(): void;
| Restarts the media connections. Useful after a device change. |
| getParticipantsList(): IApiParticipant[];
| Returns the current participants list |
| enableFollowMe(enabled: boolean): void;
| Enables or disables follow me (requires moderator rights) |
| muteVideo(muted: boolean): void;
| Mutes and unmutes the outgoing video |
| toggleMuteVideo(): void;
| Flips the current video mute state. Use this when you have no state of your own to track, and muteVideo when you do. |
| muteAudio(muted: boolean): void;
| Mutes and unmutes the outgoing audio |
| toggleMuteAudio(): void;
| Flips the current audio mute state. |
| 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, the constraints you pass are merged with the internal ones. The parameter `merge` defaults to true. |
| setDisplayMediaConstraints(displayMediaConstraints: MediaStreamConstraints, merge?: boolean): void;
| Sets the display stream constraints for getDisplayMedia calls. If merge is true, the constraints you pass are merged with the internal ones. The parameter `merge` defaults to true. |
| setVideoInputDeviceId(deviceId: string, reconnect: boolean): void;
| Sets the video input device. Note: the API does not check whether the device ID is valid |
| setAudioInputDeviceId(deviceId: string, reconnect: boolean): void;
| Sets the audio input device. Note: the API does not check whether the device ID is valid |
| setAudioOutputDeviceId(deviceId: string, reconnect: boolean): void;
| Sets the audio output device. Only Chrome and Edge support this API. Note: the API does not check whether the device ID is valid. |
| setVideoResolution(resolution: MeetingRoomVideoResolution, reconnect: boolean): void;
| Sets the main video resolution |
| getMediaDeviceSettings(): IMediaDeviceSettings;
| Retrieves the currently selected media devices |
| getMediaDeviceAudioInputList(audioOnly: boolean): MediaDeviceInfo[];
| Lists the microphones. Asks the browser for media permission first, so calling it can raise the permission prompt. Pass true to ask for the microphone alone, false to ask for microphone and camera together. |
| getMediaDeviceAudioOutputList(audioOnly: boolean): MediaDeviceInfo[];
| Lists the speakers, with the same permission behavior. Only Chrome and Edge let you select an output device. |
| getMediaDeviceVideoInputList(audioOnly: boolean): MediaDeviceInfo[];
| Lists the cameras. The argument is required to compile but has no effect here: this one always asks for microphone and camera, because a camera list is of no use without camera permission. |
| setScreensharingInterceptor(callback: () => void): void;
| Registers a callback that intercepts screensharing requests from users. An Electron application can use it to pre-select a device ID. |
| startScreensharing(sourceId?: string): void;
| Starts screensharing. An interceptor is not required. Passing a sourceId pre-selects the source, which is what an Electron application does after intercepting the request. Returns nothing and reports nothing: if the participant may not share, the call is silently ignored. |
| stopScreensharing(): void;
| Stops your own screensharing. An interceptor is not required. |
| startRecording(): void;
| Starts recording. Works only if the meeting is configured for partial recording (meeting.recordingType === 'partial') |
| stopRecording(): void;
| Stops recording. Works only if the meeting is configured for partial recording (meeting.recordingType === 'partial') |
| forceStopScreensharing(): void;
| Forcefully stops screensharing. Moderators only: the server blocks the event when a non-moderator calls it |
| enterVideoFullscreen(): void;
| Opens the video container in fullscreen. *Note*: entering fullscreen requires a user interaction, so this call fails in most browsers other than Google Chrome |
| 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;
| Lets you define how the videos are laid out. See Video Display Calculator for details |
| can(meetingPermission: string): Promise;
| Queries the Meeting Permissions service to check whether the user may use a given tool, for example "agenda.view" or "screensharing.view" |
| on(event: MeetingRoomApiEvent, callback: ApiEventCallback): void;
| Registers a listener for meeting room events |
## Type definitions
These input and output types are used by the Javascript API.
### Interfaces
```Typescript
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
```Typescript
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
```Typescript
type ApiEventCallback = (
payload: void
| IApiParticipant[]
| IApiChatMessage
| IApiRemainingTimeUpdate
| IMeetingRoomConfig
| ICustomMessage
| IScreenshareState
) => void
type SecondaryVideoPosition = "none" | "left" | "top" | "right" | "bottom";
type SecondaryDisplay = "display" | "hidden";
```
---
## Die übrige Dokumentation
- [Custom Tools – eigene Widgets im Meetingraum](https://www.veeting.com/de/developer-documentation/custom-tools)
- [Externer Autorisierungsdienst](https://www.veeting.com/de/developer-documentation/external-meeting-authorization-service)
- [iFrame und Web Komponenten](https://www.veeting.com/de/developer-documentation/iframe-and-web-components)
- [JavaScript APIs](https://www.veeting.com/de/developer-documentation/javascript-apis)
- [Komponenten](https://www.veeting.com/de/veeting-blocks/components)
- [Kontrolle über die Videodarstellung](https://www.veeting.com/de/developer-documentation/video-display-calculator)
- [Parameter in der URL](https://www.veeting.com/de/developer-documentation/query-parameters)
- [Veeting Blocks - Übersicht](https://www.veeting.com/de/veeting-blocks/introduction)
- [Veeting Rooms REST APIs](https://www.veeting.com/de/developer-documentation/api-usage)
- [Webhooks](https://www.veeting.com/de/developer-documentation/web-hooks)
Alles in einer Datei: https://www.veeting.com/llms-full.txt