VCS Video component
Renders a video input, similar to
<video> in HTML. To set the
src, pass the
id of a video input.
Like with the Image component, video sources are selected using a
src prop. However, video sources aren't assets like they are with Images. Instead, they are external inputs described in an array of “video input slots”. You can think of the slots as representing video call participants or potentially any other type of video input (for example, in a video editing application the input slots could represent tracks simultaneously active on a timeline).
There are two hooks available that let you discover what sources are available.
useActiveVideo() gives you a list of video source IDs that you can pass directly to a Video component's src prop. There is also
useMediaInput(), which gives you access to the video input slots as a raw array.
Note that VCS optimizes for video performance and tries to keep video rendering on a video-specific fast path. This places some special restrictions on how you can mix video and graphics components.
See the section Core concepts for more information.
Properties specific to the
id of the video source that should be displayed. Retrieve video stream
ids with the
useActiveVideo() hook — specifically the
activeIds property in its returned object.
|Determines how an imaine should be rendered within its layout frame. Available values:
fit — image is rendered without any cropping, centered inside its layout frame, scaled as needed,
fill — image is cropped and scaled to fill its layout frame
Properties available to all VCS components, including this one.
|A name of your choice for the component instance. Works just like the “id” property in HTML. Primarily useful for debugging.
|This prop has a special meaning to the React runtime. When you render components inside an array (e.g. a list), each individual item in the array should have a different value for the key prop. React uses this internally to quickly compare the rendered array with its previous version.
|An object of style. Each component class has its own supported style properties. For example, the
Text lets you select font styles and sizing using style, but these are not relevant to other components. Note: VCS style properties are not the same as CSS properties.
|Allows you to hook into your rendered components into the VCS layout system. After the React render cycle completes, the layout system computes final layout frames (coordinates within the output viewport). You can guide the layout process using callback functions and data you provide using the layout prop. The first value of the array must be a layout function. The second (optional) value can be a data object containing param values, which is passed to the layout function when computing the layout. See Layout API for more details.
style prop accepts an object that can have the following values set.
|Apply a rounded mask to the corners of the component.