Skip to main content
Paid plans only

​
Using Daily’s VCS to customize video layouts and add graphics

VCS stands for Video Component System. It’s Daily’s video-oriented layout engine that can be used to create layouts, known as “compositions,” which turn Daily calls into highly customized live streams or engaging recorded content.
PricingDaily’s VCS is applicable to Daily live streaming and cloud recording, which are both pay-as-you-go features. Using VCS with live streaming or cloud recording is available at no additional cost. See our pricing page for more information.
Daily has provided several options for working with VCS with varying degrees of customization and complexity. For more common video layouts and graphic applications, Daily offers the VCS baseline composition. The baseline composition is VCS’s default collection of layout and graphics features that work together and are easily accessible with a unified JSON-based control interface. It is available through daily-js and react-native-daily-js via the live streaming and recording APIs. The baseline composition allows developers to quickly modify their video feeds with a comprehensive list of layout, text, and image options. To learn more about the baseline composition, see our VCS baseline composition guide.
VCS encompasses both Daily’s baseline composition and the VCS SDK, which is documented here.The baseline composition is VCS’s default collection of layout and graphics features that work together and are easily accessible with a unified JSON-based control interface.The VCS SDK includes the baseline composition’s source code which developers can use to customize video compositions even further.
If you’ve tried out VCS’s baseline composition, you may find you still want more control over video layouts in the form of multiple text overlays, animated graphics, your own image assets — or something else that makes your live streams unique! To help provide developers with even more control, Daily is introducing VCS — the baseline composition source code. The VCS SDK offers a collection of components that provide basic building blocks for developers to build their own custom live streaming and recording layouts. In these docs, we’ll review how to build custom implementations using the VCS SDK directly in your apps.
There are two ways to use the VCS SDK:
  • Server-side. Write code that overrides some rendering in the baseline composition, and upload that code as part of a startLiveStreaming/startRecording call. This way, your custom code gets executed on Daily’s cloud as part of the live stream or recording session.
  • Client-side. Load the VCS renderer in your web app to render a live composition using media streams from a Daily room. This can be used to provide a live preview that exactly matches the rendering on Daily’s cloud.
You can use both together. This can be particularly useful for Interactive Live Streaming apps where your web clients should have a shared realtime composition of room participants and overlay graphics, but you also want to produce a visually identical recording or live stream on Daily’s cloud.
Before testing out the VCS SDK, we recommend reading our Core concepts pages: