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

function TaskInputBox() {
    return (
      <div className="toolbar"> {/* some component that holds your recording components */}
        <VeltRecorderTool type='all' /> {/* Put this where you want the Recorder button to appear */}
        <VeltRecorderControlPanel mode="floating" /> {/* Put this where you want the Recorder control panel to appear */}
      </div>
      <div className="video-player"> {/* some component that holds your video player */}
        <VeltRecorderPlayer recorderId={RECORDER_ID} /> {/* Put this where you want to show the recorded data */}
      </div>
    )
}
1

Import Velt Recorder components

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

Add the Velt Recorder Notes component

Add the Velt Recorder Notes component to the root of your app.

<VeltProvider>
  <VeltRecorderNotes/>
</VeltProvider>
3

Add the Velt Recorder Tool component

  • Add the Velt Recorder Tool component wherever you want the recorder button to appear.
  • Set the type attribute of the Velt Recorder Tool component to one of the following:
    • all
    • audio
    • video
    • screen
<div className="toolbar">
  <VeltRecorderTool type='all' />
</div>
4

Add the Velt Recorder Control Panel component

  • Add the Velt Recorder Control Panel component wherever you want the control panel to appear.
  • When a user clicks on the Velt Recorder Tool button, the Velt Recorder Control Panel component will show the recording preview with options to save, pause, or delete the recording.
  • Set the mode attribute on the VeltRecorderControlPanel component to either floating (default) or thread.

To learn more about floating or thread mode read here.

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

Add the Velt Recorder Player component

  • Add the Velt Recorder Player component wherever you want to show recordings.
  • The Velt Recorder Player component displays the recorded data with controls such as pause, play and delete.
  • Set the recorderId of the Velt Recorder Player component as the Id of the recording you are trying to show.
<div className="video-player">
  <VeltRecorderPlayer recorderId={RECORDER_ID} />
</div>

Was this page helpful?