Daily's VCS SDK Components
VCS offers a collection of VCS-specific components for developers to add custom layouts and graphics to their live streaming and cloud recording video feeds.
Although VCS is based on React, it is designed for dynamic real-time video compositions rather than interactive browser-based applications. For this reason, the set of built-in components is different than what you are likely used to. VCS doesn't have the HTML-compatible elements like
<button> that you would use to build a regular web app in React.js.
Instead, VCS uses four main components to build video compositions:
<Box>— comparable to an HTML
<Image>— comparable to an HTML
<Text>— comparable to an HTML
<Video>— comparable to an HTML
There is also a fifth built-in component available: the WebFrame. It's an embedded browser that lets you display web URLs similar to an
<iframe> tag inside a traditional web page. The embedded web site will render live on Daily's cloud. It will update in real time—not at a full 30fps video frame rate, but good enough for live document updates. You can even send simulated keyboard events to WebFrame for interactivity.
<WebFrame>— comparable to an HTML
VCS has made several styling properties available to each component, as described in their specific documentation. To learn more about why VCS is not compatible with CSS styling, read our Layout API documentation for more information.