​
AI

​
enableRecordingTranscription

Controls whether to enable AI transcription for recordings.

Default: enabled

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

​
Data

​
getRecordingData

Fetches recording data (transcript, summary, and URLs) for the given recording IDs.

const recorderElement = client.getRecorderElement();
const recorderData = await recorderElement.getRecordingData({
    recorderIds: ['RECORDER_ID']
});

​
Event Subscription

​
on

  • Subscribe to Recorder Events.
  • Here is the list of events you can subscribe to.
  • Here is the list of objects you will receive in the callback.
// 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
});

​
onDelete

When a recording is deleted by its creator, the Velt Recorder Player component emits an onDelete event containing the recorder ID. You can listen for this event to perform any necessary cleanup.

The event returns an object with the following field:

FieldTypeDescription
idstringThe ID of the deleted recorder
<VeltRecorderPlayer recorderId={RECORDER_ID} onDelete={(data) => yourDeleteMethod(data)} />

​
onRecordedData

The onRecordedData callback is triggered when a recording is completed. It provides the following data:

FieldTypeDescription
idstringUnique identifier for the recording
tagstringHTML tag to embed the recording player (e.g. <velt-recorder-player recorder-id="123"></velt-recorder-player>)

Using Hooks:

  const recorderAddEvent = useRecorderAddHandler();

  useEffect(() => {
    console.log('recorderAddEvent', recorderAddEvent);
  }, [recorderAddEvent]);

Using API:

  const recorderElement = client.getRecorderElement();
  recorderElement.onRecordedData().subscribe((recorderAddEvent) => {
    console.log(recorderAddEvent);
  });

Using Event Listener:

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

​
UI/UX

​
buttonLabel

Sets a custom label for the Velt Recorder Tool.

<VeltRecorderTool buttonLabel="Your Label Text" />

​
enableRecordingCountdown

Controls whether to display a countdown timer before a recording starts.

Default: enabled

const recorderElement = client.getRecorderElement();
recorderElement.enableRecordingCountdown();
recorderElement.disableRecordingCountdown();

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

Was this page helpful?

SetupOverview