Setup

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

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

<div className="toolbar">
  <velt-recorder-tool type='all'></velt-recorder-tool>
</div>

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

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

<div className="toolbar">
  <velt-recorder-tool type='all'></velt-recorder-tool>
  <velt-recorder-control-panel mode="thread"></velt-recorder-control-panel>
</div>

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

const recorderAddEvent = useRecorderAddHandler();
const [recorderId, setRecorderId] = useState(null);
useEffect(() => {
  setRecorderId(recorderAddEvent.id);
}, [recorderAddEvent]);

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

const recorderElement = Velt.getRecorderElement();
recorderElement.onRecordedData().subscribe((recorderAddEvent) => {
  setRecorderId(recorderAddEvent.id);
});

<div className="video-player">
  <velt-recorder-player recorderId="RECORDER_ID"></velt-recorder-player>
</div>

• 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();

const recorderElement = client.getRecorderElement();
recorderElement.enableVideoEditor();

const recorderElement = Velt.getRecorderElement();
recorderElement.enableVideoEditor();