import { VeltRecorderTool, VeltRecorderPlayer } from '@veltdev/react'

const SomeComponent = () => {
  
  const yourDeleteMethod = (data) => {
    console.log('on delete: ', data);
  }
   
  return (
  	<div>
      <VeltRecorderTool panelId="RECORDER_ID"/>
		  <VeltRecorderPlayer recorderId="RECORDER_ID" onDelete={(data) => yourDeleteMethod(data)} show={true}/>
    </div>
  )
}

export default SomeComponent;

  • React / Next.js

  • HTML

1

Recorder Panel Id

Sets the recorderId to determine which VeltRecorderTool the video comes from.

You must also set the VeltRecorderTool panelId to the same value as recorderId for the recording to show up on the VeltRecorderPlayer.

<VeltRecorderTool panelId="YOUR_PANEL_ID" />
<VeltRecorderPlayer recorderId="YOUR_PANEL_ID"/>
2

Show Transcript

Whether a transcript of a recording gets shown or not.

Default: true

The VeltRecorderPlayer will show a transcript of an audio, video or screen recording.

To enable or disable the transcript, set the show attribute:

<VeltRecorderPlayer show={true}/>
3

onDelete callback

The creator of the recordings will see an option to delete the recording after it has been recorded. Once the user deletes the recording, the VeltRecorderPlayer component will emit an event called onDelete with the recorder ID. You can listen to the callback and use the response object to perform any clean up on your end.

This is the response object that you get back:

FieldTypeExample
idstring“recorder_id”
<VeltRecorderPlayer recorderId={RECORDER_ID} onDelete={(data) => yourDeleteMethod(data)} />

Was this page helpful?

Velt Recorder Control PanelCustomize UI