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

function TaskInputBox() {
    return (
      <div className="toolbar">
        <VeltRecorderTool type='all' />
        <VeltRecorderControlPanel mode="floating" />
      </div>
      <div className="video-player">
        <VeltRecorderPlayer recorderId={RECORDER_ID} />
      </div>
    )
}
1

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>
2

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>
3

Render recorded data in Velt Recorder Player

  • After a user has finished recording, you will receive the recorded data in an event callback.
  • Add the Velt Recorder Player component with the recorderId from the event callback.
  • It displays the recorded data with controls such as pause, play, edit and delete.
const recorderAddEvent = useRecorderAddHandler();
const [recorderId, setRecorderId] = useState(null);
useEffect(() => {
  setRecorderId(recorderAddEvent.id);
}, [recorderAddEvent]);

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

Enable Recording Editor (optional)

  • Recording Editor is currently in beta and is not enabled by default.
  • It is only available for video and screen recordings.
  • It has the following default keyboard shortcuts:
    • s: Split the video at the selected frame.
    • d, delete, or backspace: Delete the selected video section.
    • space: Toggle video play/pause.
const recorderElement = client.getRecorderElement();
recorderElement.enableVideoEditor();
5

Embed Velt Video Editor (optional)

  • Embed the Velt Video Editor standalone component directly into your application.
  • It can be used to view and edit video recordings.
  • You can initialize the editor with a video from a URL, a Blob, or by using a recorderId.
<VeltVideoEditor
	blob={blob}
    url="videourl.mp4"
    darkMode={true}
    variant="xyz"
    annotationId="123"
/>

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

function TaskInputBox() {
    return (
      <div className="toolbar">
        <VeltRecorderTool type='all' />
        <VeltRecorderControlPanel mode="floating" />
      </div>
      <div className="video-player">
        <VeltRecorderPlayer recorderId={RECORDER_ID} />
      </div>
    )
}