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.

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.