Recorder
Setup
1
Import Velt Recorder components
import {
VeltRecorderNotes,
VeltRecorderTool,
VeltRecorderControlPanel,
VeltRecorderPlayer
} from '@veltdev/react'
2
Add the Velt Recorder Notes component
Add the Velt Recorder Notes
component to the root of your app.
<VeltProvider>
<VeltRecorderNotes/>
</VeltProvider>
3
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
<div className="toolbar">
<VeltRecorderTool type='all' />
</div>
4
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
.
To learn more about floating
or thread
mode read here.
<div className="toolbar">
<VeltRecorderTool type='all' />
<VeltRecorderControlPanel mode="thread" />
</div>
5
Add the Velt Recorder Player component
- Add the
Velt Recorder Player
component wherever you want to show recordings. - The
Velt Recorder Player
component displays the recorded data with controls such as pause, play and delete. - Set the
recorderId
of theVelt Recorder Player
component as the Id of the recording you are trying to show.
<div className="video-player">
<VeltRecorderPlayer recorderId={RECORDER_ID} />
</div>
Was this page helpful?