Setup

Add the VeltRecorderNotes component at the root of your app.

<VeltProvider>
  <VeltRecorderNotes/>
</VeltProvider>

Add the VeltRecorderTool component wherever you want the recorder button to appear.

<div className="toolbar">
  <VeltRecorderTool type='all' />
</div>

Choose the recording type

Set the type attribute of the VeltRecorderTool component to one of the following:

• all
• audio
• video
• screen

Add the VeltRecorderControlPanel component wherever you want the control panel to appear.

<div className="toolbar">
  <VeltRecorderTool type='all' />
  <VeltRecorderControlPanel mode="thread" />
</div>

When a user clicks on the VeltRecorderTool button, the VeltControlPanel component will show the recording preview with options to save, pause, or delete the recording.

Choose the Control Panel mode

Set the mode attribute on the VeltRecorderControlPanel component to either floating (default) or thread.

To learn more about floating or thread mode read here.

Add the VeltRecorderPlayer component wherever you want to show recordings.

<div className="video-player">
  <VeltRecorderPlayer recorderId={RECORDER_ID} />
</div>

The VeltRecorderPlayer component displays the recorded data with controls such as pause, play and delete.

Set the recorderId

Set the recorderId of the VeltRecorderPlayer component as the Id of the recording you are trying to show.