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 theVelt Recorder Tool
component to one of the following:all
audio
video
screen
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, theVelt Recorder Control Panel
component will show the recording preview with options to save, pause, or delete the recording. - Set the
mode
attribute on theVeltRecorderControlPanel
component to eitherfloating
(default) orthread
.
floating
or thread
mode read here.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 therecorderId
from the event callback. - It displays the recorded data with controls such as pause, play, edit and delete.
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
, orbackspace
: Delete the selected video section.space
: Toggle video play/pause.
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
.