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 <div> and <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<div><Image>— comparable to an HTML<img><Text>— comparable to an HTML<p><Video>— comparable to an HTML<video>
If you've ever used React Native, this description of library-specific components will sound familiar. React Native also provides its own set of built-in components — like View — which map to concepts found in mobile UI frameworks. One useful way to think of VCS is that it's a React-based toolbox, similar in approach to React Native, but designed from scratch for the special needs of video composition and real-time playback.
Embedded web content
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<iframe>
Styling
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.
See the VCS Core concepts section for more information on how VCS works.