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

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

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