AI
recordingTranscription
- Controls whether to enable AI transcription for recordings.
- If this is disabled, then the recording will not be sent to LLMs for transcription.
- You can either use the props or the API method to enable/disable this feature.
Default:
enabled
- React / Next.js
- Other Frameworks
Using Props:Using API:
summary
Controls whether to display a summary transcript of the recording. When enabled, an AI-generated summary of the recording’s content will be shown. Default:true
- React / Next.js
- Other Frameworks
Recording Configuration
setMaxLength
- Sets the maximum duration for recordings in seconds.
- You can either use props on components or API methods to configure this feature.
- Default: No limit
- React / Next.js
- Other Frameworks
Using Props:Using API:
enablePictureInPicture
- Enables Picture-in-Picture (PiP) mode for screen recordings when camera is enabled.
- This allows users to continue recording while multitasking, improving workflow efficiency for tutorial creation and documentation.
Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default.
- React / Next.js
- Other Frameworks
Using Props:Using API:
disablePictureInPicture
- Disables Picture-in-Picture (PiP) mode for screen recordings.
- This prevents users from using the PiP functionality during recording sessions.
Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default.
- React / Next.js
- Other Frameworks
Using Props:Using API:
enableRecordingMic
- Turn on user microphone on the recorder control panel.
- React / Next.js
- Other Frameworks
Using API:
setRecordingQualityConstraints
- Defines quality constraints (e.g., resolution, frame rate) for the raw media input from the user’s screen, camera, or microphone, applied before recording begins.
- Higher quality constraints will result in higher upload, download and processing times.
- Params: RecorderQualityConstraints
-
Returns:
void
- Default:
- React / Next.js
- Other Frameworks
setRecordingEncodingOptions
- Controls the output quality and size of the video or audio file you save after it’s been captured.
- Higher quality options will result in higher upload, download and processing times.
-
We automatically select the best file format (MIME type) based on the browser and device compatibility. Here is the preferred order in which this is selected:
video/mp4;codecs=h264,aac
video/mp4
audio/mp4
video/webm;codecs=vp9,opus
video/webm;codecs=vp8,opus
video/webm;codecs=h264,opus
video/webm
- Params: RecorderEncodingOptions
-
Returns:
void
- Default:
- React / Next.js
- Other Frameworks
Permissions
requestScreenPermission
- Requests screen capture permissions from the user. This is useful for enabling screen preview functionality in the Recording Preview Dialog.
- Returns:
Promise<MediaStream | null>
- React / Next.js
- Other Frameworks
askDevicePermission
- Programmatically requests audio and video permissions from the user. This is useful for creating a custom onboarding flow for device permissions.
- Params:
RecorderDevicePermissionOptions
- Returns:
Promise<void>
- React / Next.js
- Other Frameworks
Data
deleteRecordings
- Deletes recordings by their recorder IDs.
- Params: RecorderRequestQuery (optional)
- Returns:
Promise<DeleteRecordingsResponse[]>
- React / Next.js
- Other Frameworks
Using API:
downloadLatestVideo
- Downloads the latest version of a recording.
- Params:
recorderId: string
- Returns:
Promise<boolean>
- React / Next.js
- Other Frameworks
fetchRecordings
- Fetches all recordings from either the current document or specified recorder IDs.
- Params: RecorderRequestQuery (optional)
-
Returns:
Promise<GetRecordingsResponse[]>
- React / Next.js
- Other Frameworks
getRecordings
- Subscribe to all recording data from either the current document or specified recorder IDs.
- Params: RecorderRequestQuery (optional)
- Returns:
Observable<GetRecordingsResponse[]>
- React / Next.js
- Other Frameworks
Using Hook:Using API:
Event Subscription
on
- Subscribe to Recorder Events. Here is the list of events you can subscribe to and the event objects you will receive.
Event Type | Description | Event Object |
---|---|---|
transcriptionDone | Triggered when a transcription is generated and ready | TranscriptionDoneEvent |
recordingDone | Triggered when a recording is completed | RecordingDoneEvent |
deleteRecording | Triggered when a recording is deleted | RecordingDeleteEvent |
recordingEditDone | Triggered when the “Done” button is clicked in the recording editor. Fires after edits are saved, or immediately if no edits were made. | RecordingEditDoneEvent |
recordingStarted | Triggered when the recording starts. | RecordingStartedEvent |
recordingPaused | Triggered when the recording is paused. | RecordingPausedEvent |
recordingResumed | Triggered when the recording is resumed after being paused. | RecordingResumedEvent |
recordingCancelled | Triggered when the recording is cancelled. | RecordingCancelledEvent |
recordingStopped | Triggered when the recording is stopped. | RecordingStoppedEvent |
recordingSaveInitiated | Triggered when a recording saved is initiated | RecordingSaveInitiatedEvent |
error | Triggered when an error occurs. eg: editFailed , recordingFailed , transcriptionFailed | RecordingErrorEvent |
- React / Next.js
- Other Frameworks
Editor
autoOpenVideoEditor
- Controls whether to open the video editor automatically when the recording is done.
- Available in
Velt Recorder Control Panel
component.
false
- React / Next.js
- Other Frameworks
retakeOnVideoEditor
- Controls whether to enable the retake button on video editor. This will take the user back to the control panel to start a new recording.
false
- React / Next.js
- Other Frameworks
Using Props (use any one of the following):Using APIs:
enableOnboardingTooltip
- Controls whether to enable the onboarding tooltip on video editor.
false
- React / Next.js
- Other Frameworks
Using APIs:
videoEditor
- Controls whether to enable the video editor for the
Velt Recorder Player
. - Works for Video and Screen Recordings.
- Available in
Velt Recorder Notes
,Velt Recorder Player
andVelt Recorder Control Panel
components. You could use any of these.
false
- React / Next.js
- Other Frameworks
Using Props:Using API:
UI/UX
openPictureInPicture
- Opens the Picture-in-Picture window during an active recording session.
- This allows programmatic control to open the PiP window for improved multitasking during recording.
Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default.
- React / Next.js
- Other Frameworks
Using API:
exitPictureInPicture
- Closes the Picture-in-Picture window during an active recording session.
- This allows programmatic control to exit the PiP window and return to normal recording view.
Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default.
- React / Next.js
- Other Frameworks
Using API:
buttonLabel
Sets a custom label for theVelt Recorder Tool
.
- React / Next.js
- Other Frameworks
playVideoInFullScreen
- Controls whether to play the recorded video in fullscreen mode.
- You can use this prop on any of the following components:
Velt Recorder Notes
Velt Recorder Control Panel
Velt Recorder Player
false
- React / Next.js
- Other Frameworks
playbackOnPreviewClick
Control playback behavior on preview click. Enable or disable the click-to-play/pause functionality on recording previews. Default:true
- React / Next.js
- Other Frameworks
Using Props:Using API:
recordingCountdown
- Controls whether to display a countdown timer before a recording starts.
- You can either use the props or the API method to enable/disable this feature.
enabled
- React / Next.js
- Other Frameworks
Using Props:Using API:
settingsEmbedded
- Controls whether to embed the settings in the
Velt Recorder Control Panel
component. - Available in
Velt Recorder Control Panel
component. - Please use this together with the Control Panel Wireframes so that you can move the settings panel in a different part of the control panel UI.
false
- React / Next.js
- Other Frameworks
mode
TheVelt Recorder Control Panel
has two display modes:
floating
: Shows a preview in the bottom left corner of the page, regardless of component placementthread
: Displays the component at its placed location in the DOM
floating
- React / Next.js
- Other Frameworks
type
Sets the recording mode for theVelt Recorder Tool
.
Available modes:
all
- Records audio, video and screenaudio
- Records audio onlyvideo
- Records video onlyscreen
- Records screen only
audio
- React / Next.js
- Other Frameworks
Legacy Methods
onRecordedData
TheonRecordedData
callback is triggered when a recording is completed.
- Callback returns RecorderData object.
- React / Next.js
- Other Frameworks
Using Props: