VCS Image component

// See the "hello" component for an example of how to use the Image component
// https://github.com/daily-co/daily-vcs/blob/main/js/example/hello.jsx
import * as React from 'react';
import { Image } from '#vcs-react/components';

  const src = 'test_square';
  const opacity = 0.5;
  return <Image src={src} blend={{ opacity }} />;
}

​

How to provide image sources

1. A composition asset: These are part of the composition itself.
   • For example, the baseline composition includes a small user icon that’s used as the placeholder for a participant whose video is off or missing.

2. A session asset: These are specified when you start a streaming session on Daily.
   • These images are downloaded and validated before any VCS rendering happens, so there’s a guarantee that the image is never missing (assuming the session asset URL you provided was valid, of course).
   • Session assets are passed via the session_assets property in the live streaming or recording method being used. See the Session assets page for more information.
3. A dynamic asset: These can be specified during a streaming session on Daily.
   • Sometimes you don’t have an image available before the start of the session. Dynamic assets let you pass image URLs via Daily’s API at runtime. They are downloaded and validated in the background, and your VCS composition can use a hook to inspect the list of dynamic assets to determine when new content is available. (This API is not yet available.)

​

Props

​

style prop