Setup

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 the Velt Recorder Tool component to one of the following:
     • all
     • audio
     • video
     • screen

   React / Next.js

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

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

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

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 the recorderId from the event callback.
   • It displays the recorded data with controls such as pause, play, edit and delete.

   React / Next.js

   const recorderAddEvent = useRecorderAddHandler();
   const [recorderId, setRecorderId] = useState(null);
   useEffect(() => {
     setRecorderId(recorderAddEvent.id);
   }, [recorderAddEvent]);
   
   <div className="video-player">
     {recorderId && <VeltRecorderPlayer recorderId={recorderId} />}
   </div>
   

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, or backspace: Delete the selected video section.
     • space: Toggle video play/pause.

   React / Next.js

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

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.

   React / Next.js

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

React / Next.js

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