Documentation Index
Fetch the complete documentation index at: https://docs.velt.dev/llms.txt
Use this file to discover all available pages before exploring further.
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:
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>
)
}
