Setup - Velt

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

React / Next.js
HTML/ Other frameworks

<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

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.

React / Next.js
HTML/ Other frameworks

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

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.

React / Next.js
HTML/ Other frameworks

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>

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.

React / Next.js
HTML/ Other frameworks

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

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

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.

React / Next.js
Other Frameworks

<VeltVideoEditor
	blob={blob}
    url="videourl.mp4"
    darkMode={true}
    variant="xyz"
    recorderId="zK3iEAfvs1Htu3QYPy5S"
/>

<velt-video-editor
    blob="blob"
    url="videourl.mp4"
    recorder-id="zK3iEAfvs1Htu3QYPy5S"
    dark-mode="true"
    variant="xyz"
></velt-video-editor>

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>
    )
}

<div>
      <div class="toolbar"> 
        <velt-recorder-tool type='all'></velt-recorder-tool>
        <velt-recorder-control-panel mode="floating"></velt-recorder-control-panel>
      </div>
      <div class="video-player">
        <velt-recorder-player recorderId="RECORDER_ID"></velt-recorder-player>
      </div>
</div>