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:

<VeltRecorderNotes recordingTranscription={false} />
<VeltRecorderControlPanel recordingTranscription={false} />

Using API:

const recorderElement = client.getRecorderElement();
recorderElement.enableRecordingTranscription();
recorderElement.disableRecordingTranscription();

Using Props:

<velt-recorder-notes recording-transcription="false"></velt-recorder-notes>
<velt-recorder-control-panel recording-transcription="false"></velt-recorder-control-panel>

Using API:

const recorderElement = Velt.getRecorderElement();
recorderElement.enableRecordingTranscription();
recorderElement.disableRecordingTranscription();

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

<VeltRecorderPlayer summary={true}/>

<velt-recorder-player summary={true}></velt-recorder-player>

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:

<VeltRecorderTool maxLength={10} />
<VeltRecorderControlPanel maxLength={10} />

Using API:

const recorderElement = useRecorderUtils();
recorderElement.setMaxLength(10);

Using Props:

<velt-recorder-tool max-length="10"></velt-recorder-tool>
<velt-recorder-control-panel max-length="10"></velt-recorder-control-panel>

Using API:

const recorderElement = Velt.getRecorderElement();
recorderElement.setMaxLength(10);

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:

<VeltRecorderTool pictureInPicture={true} />
<VeltRecorderControlPanel pictureInPicture={true} />

Using API:

const recorderElement = useRecorderUtils();
recorderElement.enablePictureInPicture();

Using Props:

<velt-recorder-tool picture-in-picture="true"></velt-recorder-tool>
<velt-recorder-control-panel picture-in-picture="true"></velt-recorder-control-panel>

Using API:

const recorderElement = Velt.getRecorderElement();
recorderElement.enablePictureInPicture();

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:

<VeltRecorderTool pictureInPicture={false} />
<VeltRecorderControlPanel pictureInPicture={false} />

Using API:

const recorderElement = useRecorderUtils();
recorderElement.disablePictureInPicture();

Using Props:

<velt-recorder-tool picture-in-picture="false"></velt-recorder-tool>
<velt-recorder-control-panel picture-in-picture="false"></velt-recorder-control-panel>

Using API:

const recorderElement = Velt.getRecorderElement();
recorderElement.disablePictureInPicture();

enableRecordingMic

Turn on user microphone on the recorder control panel.

React / Next.js
Other Frameworks

Using API:

const recorderElement = useRecorderUtils();
recorderElement.enableRecordingMic(); // Enables the microphone.
recorderElement.disableRecordingMic(); // Disables the microphone.

Using API:

const recorderElement = Velt.getRecorderElement();
recorderElement.enableRecordingMic(); // Enables the microphone.
recorderElement.disableRecordingMic(); // Disables the microphone.

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:

{
    'safari': {
        audio: {
            sampleRate: 48000,
            echoCancellation: true,
            noiseSuppression: true,
            autoGainControl: true
        },
        video: {
            width: { min: 640, ideal: 1280, max: 1280 },
            height: { min: 360, ideal: 720, max: 720 },
            frameRate: { min: 15, ideal: 20, max: 30 },
            aspectRatio: { ideal: 1.777777778 }
        }
    },
    'other': {
        audio: {
            sampleRate: 48000,
            echoCancellation: true,
            noiseSuppression: true,
            autoGainControl: true
        },
        video: {
            width: { min: 640, ideal: 1280, max: 1280 },
            height: { min: 360, ideal: 720, max: 720 },
            frameRate: { min: 15, ideal: 20, max: 30 },
            aspectRatio: { ideal: 1.777777778 }
        }
    }
}

React / Next.js
Other Frameworks

const recorderElement = useRecorderUtils();

recorderElement.setRecordingQualityConstraints({
    'other': {
        'video': {
            width: { exact: 3024  },
            height: { exact: 1542 },
            frameRate: { exact: 20 },
        }
    }
});

const recorderElement = Velt.getRecorderElement();

recorderElement.setRecordingQualityConstraints({
    'other': {
        'video': {
            width: { exact: 3024  },
            height: { exact: 1542 },
            frameRate: { exact: 20 },
        }
    }
});

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:

{
  'safari': {
    videoBitsPerSecond: 2500000,
    audioBitsPerSecond: 128000
  },
  'other': {
    videoBitsPerSecond: 1000000,
    audioBitsPerSecond: 128000
  }
}

React / Next.js
Other Frameworks

const recorderElement = useRecorderUtils();

recorderElement.setRecordingEncodingOptions({
    'other': {
        videoBitsPerSecond: 2000000,
        audioBitsPerSecond: 128000
    }
});

const recorderElement = Velt.getRecorderElement();

recorderElement.setRecordingEncodingOptions({
    'other': {
        videoBitsPerSecond: 2000000,
        audioBitsPerSecond: 128000
    }
});

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

const recorderElement = useRecorderUtils();
await recorderElement.requestScreenPermission();

const recorderElement = Velt.getRecorderElement();
await recorderElement.requestScreenPermission();

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

const recorderElement = useRecorderUtils();

recorderElement.askDevicePermission({
  audio: true,
  video: true
});

const recorderElement = Velt.getRecorderElement();

recorderElement.askDevicePermission({
  audio: true,
  video: true
});

Data

deleteRecordings

Deletes recordings by their recorder IDs.
Params: RecorderRequestQuery (optional)
Returns: Promise<DeleteRecordingsResponse[]>

React / Next.js
Other Frameworks

Using API:

const recorderElement = useRecorderUtils();
await recorderElement.deleteRecordings({
    recorderIds: ['RECORDER_ID_1']
});

const recorderElement = Velt.getRecorderElement();
await recorderElement.deleteRecordings({
    recorderIds: ['RECORDER_ID_1']
});

downloadLatestVideo

Downloads the latest version of a recording.
Params: recorderId: string
Returns: Promise<boolean>

React / Next.js
Other Frameworks

const recorderElement = client.getRecorderElement();
await recorderElement.downloadLatestVideo('RECORDER_ID');

const recorderElement = Velt.getRecorderElement();
await recorderElement.downloadLatestVideo('RECORDER_ID');

fetchRecordings

Fetches all recordings from either the current document or specified recorder IDs.
Params: RecorderRequestQuery (optional)
Returns: Promise<GetRecordingsResponse[]>

React / Next.js
Other Frameworks

const recorderElement = useRecorderUtils();

// Fetch all recordings in the current document
const recorderData = await recorderElement.fetchRecordings();

// Fetch recordings for a specific recorder ID
const recorderData = await recorderElement.fetchRecordings({
    recorderIds: ['RECORDER_ID']
});

const recorderElement = Velt.getRecorderElement();

// Fetch all recordings in the current document
const recorderData = await recorderElement.fetchRecordings();

// Fetch recordings for a specific recorder ID
const recorderData = await recorderElement.fetchRecordings({
    recorderIds: ['RECORDER_ID']
});

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:

const recordings = useRecordings(); 

useEffect(() => {
  console.log('recordings', recordings);
}, [recordings]);

Using API:

const recorderElement = useRecorderUtils();
// Subscribe to all recordings in the current document
recorderElement.getRecordings().subscribe((data) => {
    console.log('recordings', data);
});

// Subscribe to recordings with specific recorder IDs
recorderElement.getRecordings({
    recorderIds: ['RECORDER_ID']
}).subscribe((data) => {
    console.log('recordings', data);
});

const recorderElement = Velt.getRecorderElement();

// Subscribe to all recordings in the current document
recorderElement.getRecordings().subscribe((data) => {
    console.log('recordings', data);
});

// Subscribe to recordings with specific recorder IDs
recorderElement.getRecordings({
    recorderIds: ['RECORDER_ID']
}).subscribe((data) => {
    console.log('recordings', data);
});

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

// Hook
const recorderEventCallbackData = useRecorderEventCallback('transcriptionDone');
useEffect(() => {
  if (recorderEventCallbackData) {
    // Handle recorder action callback event response
  }
}, [recorderEventCallbackData]);

// API Method
const recorderElement = client.getRecorderElement();
recorderElement.on('transcriptionDone').subscribe((event) => {
    // Handle the event response
});

const recorderElement = Velt.getRecorderElement();
recorderElement.on('transcriptionDone').subscribe((event) => {
    // Handle the event response
});

Editor

autoOpenVideoEditor

Controls whether to open the video editor automatically when the recording is done.
Available in Velt Recorder Control Panel component.

Default: false

React / Next.js
Other Frameworks

<VeltRecorderControlPanel autoOpenVideoEditor={true} />

<velt-recorder-control-panel auto-open-video-editor="true"></velt-recorder-control-panel>

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.

Default: false

React / Next.js
Other Frameworks

Using Props (use any one of the following):

<VeltRecorderPlayer retakeOnVideoEditor={true} />
<VeltRecorderControlPanel retakeOnVideoEditor={true} />
<VeltRecorderTool retakeOnVideoEditor={true} />

Using APIs:

const recorderElement = useRecorderUtils();

// Enable/disable retake button on video editor
recorderElement.enableRetakeOnVideoEditor();
recorderElement.disableRetakeOnVideoEditor();

Using Attributes: (use any one of the following)

<velt-recorder-player retake-on-video-editor="true"></velt-recorder-player>
<velt-recorder-control-panel retake-on-video-editor="true"></velt-recorder-control-panel>
<velt-recorder-tool retake-on-video-editor="true"></velt-recorder-tool>

Using APIs:

const recorderElement = Velt.getRecorderElement();

// Enable/disable retake button on video editor
recorderElement.enableRetakeOnVideoEditor();
recorderElement.disableRetakeOnVideoEditor();

enableOnboardingTooltip

Controls whether to enable the onboarding tooltip on video editor.

Default: false

React / Next.js
Other Frameworks

Using APIs:

const recorderElement = useRecorderUtils();

// Enable/disable onboarding tooltip
recorderElement.enableOnboardingTooltip();
recorderElement.disableOnboardingTooltip();

Using APIs:

const recorderElement = Velt.getRecorderElement();

// Enable/disable onboarding tooltip
recorderElement.enableOnboardingTooltip();
recorderElement.disableOnboardingTooltip();

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 and Velt Recorder Control Panel components. You could use any of these.

Default: false

React / Next.js
Other Frameworks

Using Props:

// Use any one of these.
<VeltRecorderNotes videoEditor={true} />
<VeltRecorderPlayer videoEditor={true}  />
<VeltRecorderControlPanel videoEditor={true}/>

Using API:

const recorderElement = client.getRecorderElement();
recorderElement.enableVideoEditor();
recorderElement.disableVideoEditor();

Using Props:

<!-- Use any one of these. -->
<velt-recorder-notes video-editor="true"></velt-recorder-notes>
<velt-recorder-player video-editor="true"></velt-recorder-player>
<velt-recorder-control-panel video-editor="true"></velt-recorder-control-panel>

Using API:

const recorderElement = Velt.getRecorderElement();
recorderElement.enableVideoEditor();
recorderElement.disableVideoEditor();

videoEditorTimelinePreview

Controls whether to display image snapshots of frames in the video editor timeline.
This helps users quickly navigate to specific scenes without scrubbing through the entire video.

Default: false

The timeline preview only works when both videoEditorTimelinePreview and videoEditor are set to true.

React / Next.js
Other Frameworks

Using Props:

<VeltRecorderNotes videoEditorTimelinePreview={true} videoEditor={true} />
<VeltRecorderControlPanel videoEditorTimelinePreview={true} videoEditor={true} />

Using Props:

<velt-recorder-notes video-editor-timeline-preview="true" video-editor="true"></velt-recorder-notes>
<velt-recorder-control-panel video-editor-timeline-preview="true" video-editor="true"></velt-recorder-control-panel>

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:

const recorderElement = useRecorderUtils();
recorderElement.openPictureInPicture();

Using API:

const recorderElement = Velt.getRecorderElement();
recorderElement.openPictureInPicture();

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:

const recorderElement = useRecorderUtils();
recorderElement.exitPictureInPicture();

Using API:

const recorderElement = Velt.getRecorderElement();
recorderElement.exitPictureInPicture();

buttonLabel

Sets a custom label for the Velt Recorder Tool.

React / Next.js
Other Frameworks

<VeltRecorderTool buttonLabel="Your Label Text" />

<velt-recorder-tool button-label="Your Label Text"></velt-recorder-tool>

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

Default: false

React / Next.js
Other Frameworks

// Change behaviour globally
<VeltRecorderNotes playVideoInFullScreen={true} />
<VeltRecorderControlPanel playVideoInFullScreen={true} />
// Change behaviour for specific player 
<VeltRecorderPlayer playVideoInFullScreen={true} />

<velt-recorder-notes play-video-in-full-screen="true"></velt-recorder-notes>
<velt-recorder-control-panel play-video-in-full-screen="true"></velt-recorder-control-panel>
<velt-recorder-player play-video-in-full-screen="true"></velt-recorder-player>

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:

<VeltRecorderPlayer playbackOnPreviewClick={true} />

Using API:

const recorderElement = client.getRecorderElement();
recorderElement.enablePlaybackOnPreviewClick();
recorderElement.disablePlaybackOnPreviewClick();

Using Props:

<velt-recorder-player playback-on-preview-click="true"></velt-recorder-player>

Using API:

const recorderElement = Velt.getRecorderElement();
recorderElement.enablePlaybackOnPreviewClick();
recorderElement.disablePlaybackOnPreviewClick();

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.

Default: enabled

React / Next.js
Other Frameworks

Using Props:

<VeltRecorderNotes recordingCountdown={false} />
<VeltRecorderControlPanel recordingCountdown={false} />

Using API:

const recorderElement = client.getRecorderElement();
recorderElement.enableRecordingCountdown();
recorderElement.disableRecordingCountdown();

Using Props:

<velt-recorder-notes recording-countdown="false"></velt-recorder-notes>
<velt-recorder-control-panel recording-countdown="false"></velt-recorder-control-panel>

Using API:

const recorderElement = Velt.getRecorderElement();
recorderElement.enableRecordingCountdown();
recorderElement.disableRecordingCountdown();

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.

Default: false

React / Next.js
Other Frameworks

<VeltRecorderControlPanel settingsEmbedded={true} />

<velt-recorder-control-panel settings-embedded="true"></velt-recorder-control-panel>

mode

The Velt Recorder Control Panel has two display modes:

floating: Shows a preview in the bottom left corner of the page, regardless of component placement
thread: Displays the component at its placed location in the DOM

Default: floating

React / Next.js
Other Frameworks

<VeltRecorderControlPanel mode="floating" />
<VeltRecorderControlPanel mode="thread" />

<velt-recorder-control-panel mode="floating"></velt-recorder-control-panel>
<velt-recorder-control-panel mode="thread"></velt-recorder-control-panel>

type

Sets the recording mode for the Velt Recorder Tool. Available modes:

all - Records audio, video and screen
audio - Records audio only
video - Records video only
screen - Records screen only

Default: audio

React / Next.js
Other Frameworks

<VeltRecorderTool type='all' />
<VeltRecorderTool type='audio' />
<VeltRecorderTool type='video' />
<VeltRecorderTool type='screen' />

<velt-recorder-tool type='all'></velt-recorder-tool>
<velt-recorder-tool type='audio'></velt-recorder-tool>
<velt-recorder-tool type='video'></velt-recorder-tool>
<velt-recorder-tool type='screen'></velt-recorder-tool>

Legacy Methods

onRecordedData

The onRecordedData callback is triggered when a recording is completed.

Callback returns RecorderData object.

React / Next.js
Other Frameworks

Using Props:

  const onRecordedData = (recorderAddEvent) => {
    console.log(recorderAddEvent);
  }
  return (
    <VeltRecorderControlPanel onRecordedData={onRecordedData} />
  )

Using Event Listener:

const recorderControlPanel = document.querySelector('velt-recorder-control-panel');
recorderControlPanel?.addEventListener('onRecordedData', (s) => {
    console.log('onRecordedData', s.detail);
});

Get Started

Key Concepts

Async Collaboration

Realtime Collaboration

Self-Host Data

Model Context Protocol

Webhooks

Security

Miscellaneous

​AI

​recordingTranscription

​summary

​Recording Configuration

​setMaxLength

​enablePictureInPicture

​disablePictureInPicture

​enableRecordingMic

​setRecordingQualityConstraints

​setRecordingEncodingOptions

​Permissions

​requestScreenPermission

​askDevicePermission

​Data

​deleteRecordings

​downloadLatestVideo

​fetchRecordings

​getRecordings

​Event Subscription

​on

​Editor

​autoOpenVideoEditor

​retakeOnVideoEditor

​enableOnboardingTooltip

​videoEditor

​videoEditorTimelinePreview

​UI/UX

​openPictureInPicture

​exitPictureInPicture

​buttonLabel

​playVideoInFullScreen

​playbackOnPreviewClick

​recordingCountdown

​settingsEmbedded

​mode

​type

​Legacy Methods

​onRecordedData

AI

recordingTranscription

summary

Recording Configuration

setMaxLength

enablePictureInPicture

disablePictureInPicture

enableRecordingMic

setRecordingQualityConstraints

setRecordingEncodingOptions

Permissions

requestScreenPermission

askDevicePermission

Data

deleteRecordings

downloadLatestVideo

fetchRecordings

getRecordings

Event Subscription

on

Editor

autoOpenVideoEditor

retakeOnVideoEditor

enableOnboardingTooltip

videoEditor

videoEditorTimelinePreview

UI/UX

openPictureInPicture

exitPictureInPicture

buttonLabel

playVideoInFullScreen

playbackOnPreviewClick

recordingCountdown

settingsEmbedded

mode

type

Legacy Methods

onRecordedData