Veeting Blocks – Introduction

Introduction to Veeting Blocks

Veeting Blocks are Web Components for all our Veeting collaboration tools. Use them to build your own video conferencing application or to add collaboration features to an existing one. There are Blocks for audio and video, screen sharing, a whiteboard, and more.

You can use Veeting Blocks with plain HTML, CSS and Javascript, or with a framework such as Angular, React, VueJS or Ionic.

Overview

Veeting Blocks are HTML elements that you add to your web application. The Veeting Blocks APIs let you join meetings and interact with those Blocks. Building an application or an integration is mostly a matter of laying out a user interface. You don't need to handle connectivity or WebRTC edge cases yourself. Blocks does that for you.

This introduction shows you how to install Blocks and how to add them to your project. The demo applications at the bottom of this page give you a working starting point.

Using this page with an AI assistant

Many integrations are now written with the help of an AI coding assistant. If you are using one, copy the text below into it and add a sentence describing what you want to build.

The prompt points the assistant at this page and warns it about the handful of things assistants tend to get wrong here.

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

It documents Veeting Blocks, a set of web components for video
meetings. Keep these five rules in mind:

1. Ask me for my Veeting white label domain. Do not guess one,
   and do not assume rooms.veeting.com is mine.
2. @veeting/blocks-loader comes from our own npm registry, not
   from npmjs.com. The .npmrc line is on this page and the
   install fails without it.
3. Call Blocks.init() exactly once, guarded by
   Blocks.isInitialized(). Everything else has to wait for its
   initialized callback.
4. A Block fills its parent element. If you do not give the
   parent a size, nothing appears and the page looks broken.
5. Joining needs a meeting ID, which comes from the REST API or
   from the web application. Blocks does not create meetings.

What I want to build:

Requirements

These are the basic requirements to use Veeting Blocks:

• Node.js and npm to install the loader package. Any version still supported by the Node project will do.
• Familiarity with installing npm packages.
• Experience building web application front ends.

Installation

Add our private npm registry to your workspace by adding a line to the .npmrc file in your project root. Create the file if it does not exist yet.

@veeting:registry=https://releases.veeting.net/npm/

Then install the Veeting Blocks loader:

npm install @veeting/blocks-loader

The loader always pulls the most up-to-date code directly from our servers. It also ships Typescript definitions for all APIs.

Importing and initialization

Import with Typescript or ES6

Import Blocks into the file where you use it:

import { Blocks, MeetingRoomApiEvent } from "@veeting/blocks-loader";

The package exports the enums and the interface definitions alongside Blocks, so import whatever else you use. MeetingRoomApiEvent is needed by the join example below.

Importing with plain Javascript

If you don't use a build system, copy the contents of node_modules/@veeting/blocks-loader into your assets folder, for example assets/js/blocks, and include the Javascript file directly in your HTML.

<script type="text/javascript"
    src="./assets/js/blocks/browser/blocks.js"></script>

This script puts everything on the global veeting object, so every call becomes veeting.Blocks.x instead of Blocks.x. The two are otherwise the same API.

Initialization

Initialize Blocks before you use any Block or any API. Initialization loads the main Veeting Blocks code.

Note: You need access to a Veeting white label instance. Contact us if you don't have one yet.

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

if (!Blocks.isInitialized()) {
    // Blocks.init() must only be called once!
    Blocks.init({
        version: "latest",
        whitelabelDomain: whitelabelDomain,
        initialized: async () => {
            // Veeting Blocks is initialized
        }
    });
}

Basic use case

Create a meeting

Veeting is built around meetings. Each meeting has a start date, an end date that you can extend, and a unique meeting ID. You need the meeting ID to join a meeting.

You can generate meeting IDs in our web application or through our REST APIs.

Include Blocks to your HTML

The example below adds the audio and video Block and the whiteboard Block to a page. Every Block element starts with the prefix vrb-.

<div>
    <div>
        <vrb-video></vrb-video>
    </div>
    <div>
        <vrb-whiteboard></vrb-whiteboard>
    </div>
</div>

Note: A Veeting Block fills its parent container. Give the parent a size, or the Block renders at zero height and the page looks broken.

Initialize Blocks and join a meeting

The following code initializes Blocks and joins a meeting. As described above, you need a meeting ID to join.

// Configure the domain name of your Veeting white label instance
const whitelabelDomain = "rooms.veeting.com"
// We assume that you have generated the meeting ID elsewhere
const meetingId = "0000-0000-0000-0000";
// Each Blocks participant needs a name. You can generate one randomly,
// for instance with a UUID algorithm.
const participantName = "Joe Doe";

/*
* Note: if you loaded blocks.js into your HTML instead of importing the package, every
* Blocks reference below becomes veeting.Blocks - veeting.Blocks.init({...}) and so on.
*/

if (!Blocks.isInitialized()) {
    // Blocks.init() must only be called once!
    Blocks.init({
        version: "latest",
        whitelabelDomain: whitelabelDomain,
        initialized: async () => {
            // Optional, load the meeting to ensure that 
            // the meeting exists and that the room is open
            const config = await Blocks.api.loadMeeting(meetingId);
            if (!config || !config.isOpen) {
                alert("Meeting not found or not open");
                return;
            }

            // Subscribe before joining, so you do not miss the first events
            Blocks.api.on(MeetingRoomApiEvent.participantsUpdated, (participantsList) => {
                // The participants list has been updated
            });

            // Join the meeting
            await Blocks.api.joinMeeting({
                meetingId: meetingId,
                participantName: participantName,
                audio: true,
                video: true
            })

            // Call APIs. The argument is required by the signature but has no effect
            // on this one, see the APIs page.
            const cameraDevices = Blocks.api.getMediaDeviceVideoInputList(false);
        }
    });
}

Examples

Demo workspaces

We provide Visual Studio Code workspaces for Angular, Ionic and plain Javascript demo applications.

Note: As with any WebRTC application that needs the camera and microphone, you must run these demos on localhost or on a host with HTTPS. Browsers block media access over plain HTTP.

Angular Demos

The Angular demo workspace contains three projects that you can run independently.

The Broadcast Button project shows a basic webinar setup with one moderator and several participants. It uses only the Video Block, with mute buttons for audio and video. Install the dependencies with npm install, then run npm run broadcast-button.

The Coffee Table project shows a basic video conference with several participants. It uses the Video Block and implements the Video Display Calculator interface to arrange the videos in a circle instead of our standard layout. Install the dependencies with npm install, then run npm run coffee-table.

The Meeting Room project is a complete meeting room that uses every Veeting Block. Install the dependencies with npm install, then run npm run meeting-room.

Download the Angular workspace here:

Angular Workspace

Ionic Demo

The Ionic demo workspace contains a small demo that uses the Video Block, Chat Block and Whiteboard Block. Install the dependencies with npm install, then run npm start.

Download the Ionic workspace here:

Ionic (Angular) Workspace

Plain Javascript Demo

The plain Javascript demo is a small application built around the Video Block. It uses Gulp as its build system. Install the dependencies with npm install, then run npm start.

Download the Javascript workspace here:

Javascript Workspace