Veeting Blocks – Introduction

Introduction to Veeting Blocks

Veeting Blocks are Web Components of all our Veeting collaboration tools. You use Veeting Blocks to create your own video conferencing applications or to add collaboration features to your existing solution. There are Veeting Blocks for audio and video, a whiteboard, for screen sharing, etc.

Veeting Blocks can be used with plain HTML, CSS and Javascript as well as with popular frameworks such as Angular, React, VueJS, Ionic, among others.

Overview

Veeting Blocks are HTML elements which you add to your web application. The Veeting Blocks APIs allow you to join meetings and interact with these Blocks. Building applications and integrations with Veeting Blocks is as easy as creating a user interface. You don't need to take care of connectivity and WebRTC edge cases yourselves, this is built in directly into Blocks.

This introduction shows you how to install Blocks and how to add them to your project. We have demo applications at the bottom of this page which you can use to jump-start your development.

Requirements

These are the basic requirements to use Veeting Blocks:

• You need to have NodeJS installed, at least version 14
• You need to be familiar with installing NPM packages
• You need to be proficient in writing web application front-ends

Installation

Add our private NPM repository to your workspace by adding a line to your .npmrc file in your project root directory. If you don't have an .npmrc file yet you must create it.

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

Once you have created the file you can install the Veeting Blocks loader:

npm install @veeting/blocks-loader

The Veeting Blocks loader is responsible for always loading the most up-to-date versions of the code directly from our main servers. It also includes Typescript definitions of all APIs.

Importing and initialization

Import with Typescript or ES6

To use Blocks in your code you must import it into your file.

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

Importing with plain Javascript

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

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

Initialization

Before you can access Veeting Blocks and its APIs you need to initialize Blocks. This will load the main code base to run Veeting Blocks.

Note: You need to have access to a Veeting White Label Instance. Contact us if you have don't have access 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 based on the concept of a Meeting. Each Meeting has a start and an (extendable) end date and a unique Meeting ID. The Meeting ID is required to join meetings.

You can either generate Meeting IDs directly in our web application user interface or through our REST APIs.

Include Blocks to your HTML

In the example below we include the audio and video Block as well as the whiteboard Block to our application. All Blocks start with the prefix vrb-

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

Note: The Veeting Blocks will fill the total space of their parent containers. Make sure you size them appropriately.

Initialize Blocks and join a meeting

The following code shows you how to initialize Blocks and join a meeting. As discussed earlier, you need to have a meeting ID to join meetings.

// 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 to have a name, however, you can choose to 
// randomly generate one, for instance with an UUID algorithm.
const participantName = "Joe Doe";

/*
* Note: if you run this as plain Javascript (you import the blocks.js into your HTML), then use
*
*        veeting.Blocks.init({...})
*
* instead
*/

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 veeting.Blocks.api.loadMeeting(meetingId);
            if (!config || !config.isOpen) {
                alert("Meeting not found or not open");
                return;
            }

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

            // Subscribe for events
            Blocks.api.on(MeetingRoomApiEvent.participantsUpdated, (participantsList) => {
                // The participants list has been updated
            });

            // Call APIs
            const cameraDevices = Blocks.api.getMediaDeviceVideoInputList();
        }
    });
}

Examples

Demo workspaces

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

Note: As with all WebRTC applications that need access to the camera and microphone, you MUST run these demos on localhost or an SSL/TLS enabled host. The demos will fail without encrypted HTTP connection, unless you run them on localhost.

Angular Demos

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

The Broadcast Button project demonstrates a basic Webinar use case with a moderator and participants. It uses only the Video Block with mute buttons for audio and video. Run this project with npm run broadcast-button after installing the dependencies (npm install).

The Coffee Table project demonstrates a basic video conference use case with multiple participants. It uses the Video Block and implements the Video Display Calculator interface to display videos in a circle instead of our standard layout. Run this project with npm run coffee-table after installing the dependencies (npm install).

The Meeting Room project is a fully fledged meeting room show-casing all Veeting Blocks. Run this project with npm run meeting-room after installing the dependencies (npm install),

Download the Angular workspace here:

Angular Workspace

Ionic Demo

The Ionic demo workspace contains a small demo usig the Video Block, Chat Block and Whiteboard Block. Run this project with npm start after installing the dependencies (npm install).

Download the Ionic workspace here:

Ionic (Angular) Workspace

Plain Javascript Demo

The Ionic demo workspace contains a small demo usig the Video Block. It uses Gulp as its build system. Run this project with npm start after installing the dependencies (npm install).

Download the Javascript workspace here:

Javascript Workspace