@daily-co/daily-vcs-web
TypeScript icon, indicating that this package has built-in type declarations

0.0.1-alpha.10 • Public • Published

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),
  }
}

Readme

Keywords

none

Package Sidebar

Install

npm i @daily-co/daily-vcs-web

Weekly Downloads

10

Version

0.0.1-alpha.10

License

BSD-2-Clause

Unpacked Size

47.9 kB

Total Files

12

Last publish

Collaborators

  • markatdaily
  • paulidaily
  • moishel
  • jamsea
  • aconchillo
  • filipi.fuchter
  • sunahsuh
  • rajneeshksoni
  • ruthless_daily
  • kwindla
  • kompfner_daily
  • christian-daily
  • vipyne-dailyco
  • cbrianhill
  • chad-daily
  • jptaylor