Skip to main content

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

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

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

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

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

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.

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

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

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

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

Data

deleteRecordings

  • React / Next.js
  • Other Frameworks
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>
  • React / Next.js
  • Other Frameworks
const recorderElement = client.getRecorderElement();
await recorderElement.downloadLatestVideo('RECORDER_ID');

fetchRecordings

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

getRecordings

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

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

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

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

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

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

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

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

buttonLabel

Sets a custom label for the Velt Recorder Tool.
  • React / Next.js
  • Other Frameworks
<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
  • React / Next.js
  • Other Frameworks
// Change behaviour globally
<VeltRecorderNotes playVideoInFullScreen={true} />
<VeltRecorderControlPanel playVideoInFullScreen={true} />
// Change behaviour for specific player 
<VeltRecorderPlayer playVideoInFullScreen={true} />

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

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

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

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

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

Legacy Methods

onRecordedData

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

I