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

PrimitiveWireframe
Record buttonVeltRecorderToolVeltRecorderAllToolWireframe, VeltRecorderAllToolMenuWireframe, VeltRecorderAudio/Video/ScreenToolWireframe
Control panel (recording)VeltRecorderControlPanelVeltRecorderControlPanelWireframe
Player (playback)VeltRecorderPlayerVeltRecorderPlayerWireframe, VeltRecorderPlayerExpandedWireframe
Preview / settings dialogsNoneVeltRecordingPreviewStepsDialogWireframe, VeltMediaSourceSettingsWireframe
Subtitles / transcriptVeltSubtitles, VeltTranscriptionVeltSubtitlesWireframe, VeltTranscriptionWireframe
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.
  • Record tool (VeltRecorderTool): type (audio/video/screen/all), buttonLabel, recordingCountdown, darkMode, shadowDom, variant, maxLength, pictureInPicture.
  • Control panel (VeltRecorderControlPanel): mode ('floating' | 'thread'), recordingTranscription (enable transcript capture), videoEditor / autoOpenVideoEditor / retakeOnVideoEditor, settingsEmbedded, playVideoInFullScreen, panelId.
  • Player (VeltRecorderPlayer): recorderId, summary (show AI summary), videoEditor, playbackOnPreviewClick, shadowDom.
  • Subtitles / Transcription: mode ('floating' | 'embed'; transcription also 'summaryMode'), visible, transcription, timeToRead, variant.

​
CSS: stateful classes

(Override with !important, R9b.) Tools: velt-recorder-all-tool-container--active (menu open) / --disabled (recording in progress); [attr.dark]. Control panel: recorder-panel, [class.audio/.video/.screen] (by recording type), velt-recorder-saving (loading), …floating--container-collapsed. Player (expanded, BEM velt-video-player--*): --controls, --toggle-button, --progress-bar, --time, .flip (video), hover reveals --controls-container. Transcription: velt-transcription-content-item--selected (active segment), velt-transcription-button--disabled, velt-transcription-summary-mode. Subtitles: velt-subtitles-button--disabled.

​
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

  • useRecordings(query?) → recordings list; useRecorderUtils() → imperative recorder element; useRecorderEventCallback('recordingStarted' | 'recordingStopped' | 'recordingDone' | …).
  • Via comment element: useGetRecording(), useDeleteRecording().
  • 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.