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

​
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

​
enableRecordingMic

  • Turn on user microphone on the recorder control panel.
Using API:
const recorderElement = useRecorderUtils();
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 }
        }
    }
}

const recorderElement = useRecorderUtils();

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

​
Data

​
deleteRecordings

Using API:
const recorderElement = useRecorderUtils();
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');

​
fetchRecordings

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

​
getRecordings

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

​
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 TypeDescriptionEvent Object
transcriptionDoneTriggered when a transcription is generated and readyTranscriptionDoneEvent
recordingDoneTriggered when a recording is completedRecordingDoneEvent
deleteRecordingTriggered when a recording is deletedRecordingDeleteEvent
recordingEditDoneTriggered when a recording is edited and savedRecordingEditDoneEvent
recordingSaveInitiatedTriggered when a recording saved is initiatedRecordingSaveInitiatedEvent
errorTriggered when an error occurs. eg: editFailed, recordingFailed, transcriptionFailedRecordingErrorEvent
// 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
});

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

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

​
enableOnboardingTooltip

  • Controls whether to enable the onboarding tooltip on video editor.
Default: false
Using APIs:
const recorderElement = useRecorderUtils();

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

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

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

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

​
Legacy Methods

​
onRecordedData

The onRecordedData callback is triggered when a recording is completed.
Using Props:
  const onRecordedData = (recorderAddEvent) => {
    console.log(recorderAddEvent);
  }
  return (
    <VeltRecorderControlPanel onRecordedData={onRecordedData} />
  )