> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

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

> [tab] React / Next.js
>
> ```js theme={null}
> <div className="toolbar">
>   <VeltRecorderTool type='all' />
> </div>
> ```

> [tab] HTML/ Other frameworks
>
> ```html theme={null}
> <div className="toolbar">
>   <velt-recorder-tool type='all'></velt-recorder-tool>
> </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](https://velt.dev/docs/async-collaboration/recorder/customize-behavior.md#mode).

> [tab] React / Next.js
>
> ```js theme={null}
> <div className="toolbar">
>   <VeltRecorderTool type='all' />
>   <VeltRecorderControlPanel mode="thread" />
> </div>
> ```

> [tab] HTML/ Other frameworks
>
> ```html theme={null}
> <div className="toolbar">
>   <velt-recorder-tool type='all'></velt-recorder-tool>
>   <velt-recorder-control-panel mode="thread"></velt-recorder-control-panel>
> </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.

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

> [tab] HTML/ Other frameworks
>
> ```js theme={null}
> const recorderElement = Velt.getRecorderElement();
> recorderElement.onRecordedData().subscribe((recorderAddEvent) => {
>   setRecorderId(recorderAddEvent.id);
> });
> ```
>
> ```html theme={null}
> <div className="video-player">
>   <velt-recorder-player recorderId="RECORDER_ID"></velt-recorder-player>
> </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.

> [tab] React / Next.js
>
> ```js theme={null}
> const recorderElement = client.getRecorderElement();
> recorderElement.enableVideoEditor();
> ```

> [tab] HTML/ Other frameworks
>
> ```js theme={null}
> const recorderElement = Velt.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`.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltVideoEditor
> 	blob={blob}
>     url="videourl.mp4"
>     darkMode={true}
>     variant="xyz"
>     recorderId="zK3iEAfvs1Htu3QYPy5S"
> />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-video-editor
>     blob="blob"
>     url="videourl.mp4"
>     recorder-id="zK3iEAfvs1Htu3QYPy5S"
>     dark-mode="true"
>     variant="xyz"
> ></velt-video-editor>
> ```

```js React / Next.js theme={null}
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>
    )
}
```

```html HTML theme={null}
<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>
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.