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

Using Props:

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

Using API:

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

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

<VeltRecorderPlayer summary={true}/>

Recording Configuration

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 }
        }
    }
}

const recorderElement = useRecorderUtils();

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

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
  }
}

const recorderElement = useRecorderUtils();

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

const recorderElement = useRecorderUtils();

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

const recorderElement = Velt.getRecorderElement();

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

Data

deleteRecordings

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

Using API:

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

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>

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

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[]>

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 = 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[]>

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);
});

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 a recording is edited and saved	RecordingEditDoneEvent
`recordingSaveInitiated`	Triggered when a recording saved is initiated	RecordingSaveInitiatedEvent
`error`	Triggered when an error occurs. eg: `editFailed`, `recordingFailed`, `transcriptionFailed`	RecordingErrorEvent

// 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
});

// 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

<VeltRecorderControlPanel autoOpenVideoEditor={true} />

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

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.
<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();

UI/UX

buttonLabel

Sets a custom label for the Velt Recorder Tool.

<VeltRecorderTool buttonLabel="Your Label Text" />

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

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

// 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>
</Tab>
</Tabs>





#### 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`

<Tabs>
<Tab title="React / Next.js">
**Using Props:**
```jsx
<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

<VeltRecorderControlPanel settingsEmbedded={true} />

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

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

<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

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

<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.

Using Props:

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

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

Customize Behavior

AI

recordingTranscription

summary

Recording Configuration

setRecordingQualityConstraints

setRecordingEncodingOptions

Data

deleteRecordings

downloadLatestVideo

fetchRecordings

getRecordings

Event Subscription

on

Editor

autoOpenVideoEditor

videoEditor

UI/UX

buttonLabel

playVideoInFullScreen

settingsEmbedded

mode

type

Legacy Methods

onRecordedData

Get Started

Key Concepts

Async Collaboration

Realtime Collaboration

Self-Host Data

Model Context Protocol

Webhooks

Security

Miscellaneous

​AI

​recordingTranscription

​summary

​Recording Configuration

​setRecordingQualityConstraints

​setRecordingEncodingOptions

​Data

​deleteRecordings

​downloadLatestVideo

​fetchRecordings

​getRecordings

​Event Subscription

​on

​Editor

​autoOpenVideoEditor

​videoEditor

​UI/UX

​buttonLabel

​playVideoInFullScreen

​settingsEmbedded

​mode

​type

​Legacy Methods

​onRecordedData

AI

recordingTranscription

summary

Recording Configuration

setRecordingQualityConstraints

setRecordingEncodingOptions

Data

deleteRecordings

downloadLatestVideo

fetchRecordings

getRecordings

Event Subscription

on

Editor

autoOpenVideoEditor

videoEditor

UI/UX

buttonLabel

playVideoInFullScreen

settingsEmbedded

mode

type

Legacy Methods

onRecordedData