Using session assets in Daily VCS

Paid plans only Session assets are assets made available to VCS when a live stream or cloud recording is started. For example, a logo image can be included under the session_assets property, which can then be applied as an image overlay in your video feed. Session assets must be specified when starting the live stream or recording. The asset URLs you pass will be preloaded immediately and cached on the server. This ensures the data is instantly available when your rendering makes use of it (for example, when you send a param update to display the logo overlay). If you are using Daily’s VCS baseline composition, session assets can only be images. (Note: Only .png extensions are permitted.)

await call.startLiveStreaming({
  rtmpUrl: 'RTMP_URL',
  layout: {
    preset: 'custom', // required
    composition_id: 'daily:baseline', // optional: default value
    composition_params: {
      mode: 'dominant',
      showTextOverlay: true,
      'text.content': 'Hello',
      'text.align_horizontal': 'right',
      'text.align_vertical': 'bottom',
      'text.fontFamily': 'Exo',
      'text.fontWeight': '500',
      'videoSettings.roundedCorners': true,
      'videoSettings.showParticipantLabels': true,
      showImageOverlay: true,
      'image.assetName': 'logo.png',
    },
    session_assets: {
      // the key is images/ followed by your file name, including the extension
      // the value must be an absolute URL to a hosted asset
      'images/logo.png': 'https://example.com/logo.png',
    },
  },
});

image.assetName must match the session_assets key with the images/ prefix removed, and it must keep the file extension. So a key of images/logo.png means you set image.assetName to logo.png, not logo. If the two do not match, the overlay area renders as a plain green box instead of your image.

When using the VCS SDK to add your own customized VCS components, session assets can include images (as described above), as well as external links to the custom components you would like applied to your live stream or recording video feed:

await call.startLiveStreaming({
  rtmpUrl: 'RTMP_URL',
  layout: {
    preset: 'custom', // required
    composition_id: 'daily:baseline',
    composition_params: {
      // ... Add your composition params here
    },
    session_assets: {
      'images/logo.png': 'https://example.com/logo.png',
      'CustomOverlay.js':
        'https://example.com/my_custom_composition/CustomOverlay.js',
    },
  },
});

Getting Started

Core Concepts

Components

Custom React Hooks

Tools

Using session assets in Daily VCS