Daily VCS Web

The @daily-co/daily-vcs-web package enables developers to render a VCSComposition inside a given DOM element in the browser.

Installation

Install the package via npm or yarn:

npm install @daily-co/daily-vcs-web
# or
yarn add @daily-co/daily-vcs-web

Usage

Import the DailyVCSWebRender class from @daily-co/daily-vcs-web and create an instance to get started:

import DailyIframe from '@daily-co/daily-js';
import DailyVCSBaselineComposition from '@daily-co/vcs-composition-daily-baseline-web';
import DailyVCSWebRenderer from '@daily-co/daily-vcs-web';

const callObject = DailyIframe.createCallObject();
const rootEl = document.getElementById('vcs-wrapper'); // DOM element where the VCS composition will be rendered
const opts = {
  callObject: callObject,
  viewportSize: { w: 1280, h: 720 },
};

const renderer = new DailyVCSWebRenderer(
  callObject,
  DailyVCSBaselineComposition,
  rootEl,
  opts
);

Methods

The DailyVCSWebRenderer class provides the following methods:

• start()

Starts the VCS composition and renders it to the specified DOM element.

renderer.start();

• stop()

Stops the VCS composition and removes it from the DOM.

renderer.stop()

• sendParam(paramId, value)

Sends a parameter update to the VCS composition.

renderer.sendParam('paramId', value);

• sendParams(params)

Sends a map of parameter updates to the VCS composition.

renderer.sendParams({
  paramId1: value1,
  paramId2: value2,
  ...params
});

• updateImageSources(images, mergeType)

Updates the image sources of the VCS composition.

renderer.updateImageSources(
  {
    imageId1: 'imageUrl1',
    imageId2: 'imageUrl2',
    // ...
  },
  'replace' // Optional: mergeType, either 'merge' or 'replace' (default is 'replace')
);

• updateParticipantIds(participantIds, mergeType)

Updates the participantIds to render.

renderer.updateParticipantIds(
  ['participantId1', 'participantId2', ...],
  'replace' // Optional: mergeType, either 'merge' or 'replace' (default is 'replace')
);

Properties

The DailyVCSWebRenderer class also provides several read-only properties:

Name	Type	Description
rootElement	DOMElement	The DOM element where the VCS composition is rendered
vcsApiInstance	VCSApi	The VCSApi instance returned by the VCSComposition. It can be used to send updates to the VCS composition.
composition	VCSComposition	The VCS composition object.
participants	string[]	An array of participantIds to render.
params	Param[]	A map of paramId to value. It keeps track of the current state of the VCS composition.
size	{ w: number, h: number }	The render viewport size used by VCS.
imageSources	Record<string, string>	A map of image assets. It keeps track of the current image sources

Callbacks

The DailyVCSWebRenderer class allows you to set optional callbacks that will be triggered during specific events. The available callbacks are:

• onStart: Called when the VCS composition starts.
• onStop: Called when the VCS composition stops.
• onError: Called when an error occurs during the VCS composition.
• onParamsChanged: Called when parameter values are updated.

const opts = {
  // ... other options ...
  callbacks: {
    onStart: () => console.log('VCS composition started.'),
    onStop: () => console.log('VCS composition stopped.'),
    onError: (e) => console.log('VCS composition error:', e),
    onParamsChanged: (params) => console.log('Params changed', params),
  }
}