Docs
Get startedGuidesReferenceBlogChangelog
  1. Home
  2. Reference Docs
  3. Video Component System
  4. Core concepts
  5. Composition file structure & interface

Composition file structure and interface
Pay-as-you-go

See section Core concepts: Video composition for more background on this concept of a VCS video composition.

Daily VCS compositions should be supplied as a folder containing an index.jsx file. The index.jsx file is called the "composition root". The baseline composition's index.jsx file can be used an example of what any custom versions should look like.

Your index.jsx file must use the newer JavaScript module standard, i.e. import/export statements. (The older Node.js style of require and module.exports will not work.)

A package.json is not required in the folder supplied for a live stream or recording. VCS uses runtime inspection to discover the composition's features, and importing third party packages from npm isn't supported. (You can still include a package.json for metadata, if you want.)

Composition root entry points

The composition root must export two entry points:

  1. The composition interface, a JSON object:
  1. The root component — a React functional component — which must be the default export:

We can see examples of how these should look in Daily's VCS baseline composition source code:

Reminder

The VCS baseline composition is Daily's default collection of layout and graphics features built with the VCS SDK. The VCS SDK has been open sourced to allow developers to customize their layouts/graphics for live streaming and cloud recordings beyond what you can already do with the baseline composition.

You may notice the composition examples included in the daily-vcs/js/example folder are single-file compositions. We've intentionally broken our own rule to make the examples easier to browse. A single-file composition cannot include assets so it is an extremely limited way of interacting with the VCS SDK.

The composition interface format

The object exported as compositionInterface may contain the following properties:

displayMeta: Object

  • name: String
    • User-visible name for the composition (shown in the simulator UI)
  • description: String
    • User-visible description of the composition

params: Array of ParamDesc

  • ParamDesc: Object
    • id: String (Mandatory)
      • An internal ID for this param
      • This ID can be used to look up the param's value at runtime
    • type: String (enum) (Mandatory)
      • Allowed values are:
        • boolean: Rendered as a checkbox in the simulator UI
        • number: Rendered as a number field (with increment/decrement buttons) in the simulator UI
        • text: Rendered as a text field in the simulator UI
        • enum: Rendered as a pop-up menu button (a HTML <select> element) in the simulator UI
          • When using this type, include the values property
    • defaultValue: any, depends on type (Optional)
    • values: Array of strings (Optional)
      • Only applies to the enum type
    • step: Number (Optional)
      • Only applies to the number type
      • Sets the increment/decrement step for the simulator UI

Continue reading our additional Core concepts pages:

Next