Function: Webcam()

Webcam(options?: object): WebcamElement

Creates a live reactive Webcam element on stage.

Parameters

Parameter	Type	Description
options	{ align?: Align; background?: string; blur?: number; brightness?: number; className?: string; color?: string; customPositioned?: boolean; cycleOnClick?: boolean; deviceId?: string; enterDelay?: number; enterDuration?: number; exitDelay?: number; exitDuration?: number; facingMode?: "user" | "environment"; fit?: ImageFit; height?: Size; id?: string; idealHeight?: number; idealWidth?: number; mirror?: boolean; onActivate?: () => void; onDeactivate?: () => void; onMount?: () => void; onUnmount?: () => void; opacity?: number; origin?: ElementAnchor; position?: Position; rotation?: number; scale?: number; size?: Size; style?: Properties<0 | string & object, string & object>; theme?: Partial<ThemeConfig>; width?: Size; x?: PositionCoord; y?: PositionCoord; }	-
options.align?	Align	-
options.background?	string	Optional background fill color behind the video. Defaults to var(--sr-surface-subtle, #1e293b).
options.blur?	number	Blur in virtual pixels (default: 0).
options.brightness?	number	Brightness multiplier (default: 1).
options.className?	string	-
options.color?	string	Foreground CSS color (default: component/theme color).
options.customPositioned?	boolean	Whether this element manages its own CSS transform / positioning (disables stage translate3d).
options.cycleOnClick?	boolean	Double-click webcam to cycle through connected cameras. Defaults to true.
options.deviceId?	string	Explicit device ID or camera label substring.
options.enterDelay?	number	Delay in seconds before entering scene transition begins.
options.enterDuration?	number	Duration in seconds for entering scene transition.
options.exitDelay?	number	Delay in seconds before exiting scene transition begins.
options.exitDuration?	number	Duration in seconds for exiting scene transition.
options.facingMode?	"user" | "environment"	Camera orientation: "user" (front selfie)
options.fit?	ImageFit	Sizing fit: "cover" (default, ideal for round avatars)
options.height?	Size	Height in stage units or CSS length (default: content size).
options.id?	string	-
options.idealHeight?	number	Ideal video capture height in pixels. Defaults to 720.
options.idealWidth?	number	Ideal video capture width in pixels. Defaults to 1280.
options.mirror?	boolean	Mirror horizontally so presenter movement feels natural. Defaults to true for "user" camera.
options.onActivate?	() => void	-
options.onDeactivate?	() => void	-
options.onMount?	() => void	-
options.onUnmount?	() => void	-
options.opacity?	number	Whole-element opacity from 0 to 1 (default: 1).
options.origin?	ElementAnchor	Which point of the element sits on its coordinate (default: "top-left").
options.position?	Position	-
options.rotation?	number	Rotation in degrees (default: 0).
options.scale?	number	Scale multiplier (default: 1).
options.size?	Size	Both dimensions in stage units or CSS length (default: unset).
options.style?	Properties<0 | string & object, string & object>	-
options.theme?	Partial<ThemeConfig>	-
options.width?	Size	Width in stage units or CSS length (default: content size).
options.x?	PositionCoord	Horizontal position in stage units (default: 0).
options.y?	PositionCoord	Vertical position in stage units (default: 0).

Returns

WebcamElement

Example

// Presenter bubble avatar in the bottom-right corner:
const presenter = Frame(paths.circle(), Webcam({ mirror: true }), {
  position: [154, 84],
  origin: "bottom-right",
  size: 180,
  active: true,
});