​
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 the “Done” button is clicked in the recording editor. Fires after edits are saved, or immediately if no edits were made.RecordingEditDoneEvent
recordingStartedTriggered when the recording starts.RecordingStartedEvent
recordingPausedTriggered when the recording is paused.RecordingPausedEvent
recordingResumedTriggered when the recording is resumed after being paused.RecordingResumedEvent
recordingCancelledTriggered when the recording is cancelled.RecordingCancelledEvent
recordingStoppedTriggered when the recording is stopped.RecordingStoppedEvent
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} />
  )