Skip to main content
Async audio/video/screen recording: a record tool, a control panel (while recording), a player (playback), plus subtitles & a transcript panel. The deepest wireframe surface in the SDK (a very large slot tree). All four layers apply, but the wireframe variables are flat-config ({componentConfig.<x>}).

​
Components

There is no VeltRecorderAudioTool / …VideoTool / …ScreenTool primitive. You pick the recording type with VeltRecorderTool’s type prop ('audio' | 'video' | 'screen' | 'all'); the per-type tools exist only as wireframe slots.

​
Config props

Do this first.

​
CSS: stateful classes

(Override with !important, R9b.)

​
Wireframes: slot trees + tokens

The trees are large (overview only); the major groups:
  • VeltRecorderControlPanelWireframe → .FloatingMode / .ThreadMode, each with .Video / .Screen / .Waveform / .Loading / .Paused and an ActionBar (.Clear, .Stop, .Time, .Toggle→.Play/.Pause, .TypeIcon [prop type], .Waveform, .Pip).
  • VeltRecorderPlayerWireframe → .AudioContainer / .VideoContainer, each with toggle/time/seek/subtitles/transcription/copy-link/delete/avatar/name; video adds .Timeline→.SeekBar, .FullScreenButton, .EditButton.
  • VeltRecorderPlayerExpandedWireframe → .Controls (.ToggleButton, .ProgressBar, .Time/.CurrentTime/.TotalTime, .VolumeButton, .SettingsButton, .SubtitleButton→.Icon/.Tooltip, .TranscriptionButton, .DeleteButton) + .Panel / .Subtitles / .Transcription / .MinimizeButton / .CopyLink.
  • VeltRecordingPreviewStepsDialogWireframe → .Video / .Audio, each with .MicButton→.On/.Off, .CameraButton, .StartRecording, .Timer→.Countdown/.Cancel, .Settings, .Waveform.
  • VeltMediaSourceSettingsWireframe → .Audio / .Video → .ToggleIcon, .SelectedLabel, .Options→.Item→.Icon/.Label.
  • VeltTranscriptionWireframe → .EmbedMode(→.Panel) / .FloatingMode(→.Button/.Tooltip/.Panel); panel → .CloseButton, .CopyLink, .Summary→.ExpandToggle(.On/.Off)/.Text, .Content→.Item→.Time/.Text.
  • VeltSubtitlesWireframe → .EmbedMode(→.Text) / .FloatingMode(→.Button/.Tooltip/.Panel/.CloseButton/.Text).
Only a couple of slots take input props: both are type: 'audio'|'video'|'screen' (the ActionBar TypeIcon and the preview-dialog BottomPanel.Icon). Key tokens (flat: use {componentConfig.<x>}; shorthand collides for disabled/darkMode/variant/screenSharingSupported/user/annotation → use the full path): recordingInProgress 🔑, mode ('floating'|'thread'), loading 🔑, isRecording 🔑 (pause/play gate), recordingType ('audio'|'video'|'screen'), recordingTranscriptionEnabled 🔑, isPlaying 🔑, transcriptionVisible 🔑, subtitlesVisible 🔑, highlightedTextIndex, vttFileTextArray. Player callbacks you can bind to custom buttons: copyLink, deleteRecorderAnnotation, onSeekToVideo/onSeekToAudio, onSubtitlesButtonClick, onTranscriptionButtonClick.

​
Headless hooks

Transcription/subtitles have no headless hooks: they’re surfaced through the recorder player config + the Transcription/Subtitles wireframe slots.

​
Limitations

  • Tool variants (audio/video/screen/all) have no standalone primitive: use VeltRecorderTool type + wireframe slots.
  • Transcription & subtitles are not independently embeddable as public <velt-*> elements: their real customization surface is the recorder player’s Transcription/Subtitles slots, and they have no hooks.
  • Recorder wireframe variables are flat ({componentConfig.<x>}), and several names collide → use the full path.
  • The player’s top level uses internal rendering; the wireframe slot decomposition starts one level in.