Skip to main content

Video & Camera

StageRoutine includes components for dynamic media playback and live presenter video: Video and Webcam.

Video​

Video wraps an HTML5 video element with playback options:

import { Video } from "stageroutine";

const video = Video("/assets/recording.mp4", {
  position: [80, 45],
  origin: "center",
  width: 53.33,
  height: 30,
  muted: true,
  loop: true,
  fit: "contain",
});

Clicking a video toggles playback interactively.

Sizing and Fit​

Video and Webcam support CSS object-fit scaling via fit:

  • "contain" (default for Video): Scales content to fit within bounds while preserving aspect ratio.
  • "cover" (default for Webcam): Fills bounds completely, cropping overflow.
  • "fill": Stretches content to exact bounds.

Webcam​

Webcam displays a live camera feed. Wrap it in a Frame to create a circular presenter bubble:

import { Frame, paths, Webcam } from "stageroutine";

const cam = Frame(paths.circle(), Webcam({ mirror: true }), {
  x: 136,
  y: 72,
  size: 13.33,
  borderColor: "#38bdf8",
  strokeWidth: 2,
  active: true,
});

API Reference​

currentTime is the authored seek target in seconds (default: 0). Backward navigation restores it. Read playbackTime for the observed playback position. Live playback time is not a snapshot.