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

# Customize Behavior

# AI

#### recordingTranscription

* Controls whether to enable AI transcription for recordings.
* If this is disabled, then the recording will not be sent to LLMs for transcription.
* You can either use the props or the API method to enable/disable this feature.
  Default: `enabled`

> [tab] React / Next.js
>
> **Using Props:**
>
> ```jsx theme={null}
> <VeltRecorderNotes recordingTranscription={false} />
> <VeltRecorderControlPanel recordingTranscription={false} />
> ```
>
> **Using API:**
>
> ```jsx theme={null}
> const recorderElement = client.getRecorderElement();
> recorderElement.enableRecordingTranscription();
> recorderElement.disableRecordingTranscription();
> ```

> [tab] Other Frameworks
>
> **Using Props:**
>
> ```html theme={null}
> <velt-recorder-notes recording-transcription="false"></velt-recorder-notes>
> <velt-recorder-control-panel recording-transcription="false"></velt-recorder-control-panel>
> ```
>
> **Using API:**
>
> ```js theme={null}
> const recorderElement = Velt.getRecorderElement();
> recorderElement.enableRecordingTranscription();
> recorderElement.disableRecordingTranscription();
> ```

#### summary

Controls whether to display a summary transcript of the recording. When enabled, an AI-generated summary of the recording's content will be shown.

Default: `true`

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltRecorderPlayer summary={true}/>
> ```

> [tab] Other Frameworks
>
> ```jsx theme={null}
> <velt-recorder-player summary={true}></velt-recorder-player>
> ```

# Recording Configuration

#### setMaxLength

* Sets the maximum duration for recordings in seconds.
* You can either use props on components or API methods to configure this feature.
* Default: No limit

> [tab] React / Next.js
>
> **Using Props:**
>
> ```jsx theme={null}
> <VeltRecorderTool maxLength={10} />
> <VeltRecorderControlPanel maxLength={10} />
> ```
>
> **Using API:**
>
> ```jsx theme={null}
> const recorderElement = useRecorderUtils();
> recorderElement.setMaxLength(10);
> ```

> [tab] Other Frameworks
>
> **Using Props:**
>
> ```html theme={null}
> <velt-recorder-tool max-length="10"></velt-recorder-tool>
> <velt-recorder-control-panel max-length="10"></velt-recorder-control-panel>
> ```
>
> **Using API:**
>
> ```js theme={null}
> const recorderElement = Velt.getRecorderElement();
> recorderElement.setMaxLength(10);
> ```

#### enablePictureInPicture

* Enables Picture-in-Picture (PiP) mode for screen recordings when camera is enabled.
* This allows users to continue recording while multitasking, improving workflow efficiency for tutorial creation and documentation.

> [!WARNING]
>
> Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default.

> [tab] React / Next.js
>
> **Using Props:**
>
> ```jsx theme={null}
> <VeltRecorderTool pictureInPicture={true} />
> <VeltRecorderControlPanel pictureInPicture={true} />
> ```
>
> **Using API:**
>
> ```jsx theme={null}
> const recorderElement = useRecorderUtils();
> recorderElement.enablePictureInPicture();
> ```

> [tab] Other Frameworks
>
> **Using Props:**
>
> ```html theme={null}
> <velt-recorder-tool picture-in-picture="true"></velt-recorder-tool>
> <velt-recorder-control-panel picture-in-picture="true"></velt-recorder-control-panel>
> ```
>
> **Using API:**
>
> ```js theme={null}
> const recorderElement = Velt.getRecorderElement();
> recorderElement.enablePictureInPicture();
> ```

#### disablePictureInPicture

* Disables Picture-in-Picture (PiP) mode for screen recordings.
* This prevents users from using the PiP functionality during recording sessions.

> [!WARNING]
>
> Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default.

> [tab] React / Next.js
>
> **Using Props:**
>
> ```jsx theme={null}
> <VeltRecorderTool pictureInPicture={false} />
> <VeltRecorderControlPanel pictureInPicture={false} />
> ```
>
> **Using API:**
>
> ```jsx theme={null}
> const recorderElement = useRecorderUtils();
> recorderElement.disablePictureInPicture();
> ```

> [tab] Other Frameworks
>
> **Using Props:**
>
> ```html theme={null}
> <velt-recorder-tool picture-in-picture="false"></velt-recorder-tool>
> <velt-recorder-control-panel picture-in-picture="false"></velt-recorder-control-panel>
> ```
>
> **Using API:**
>
> ```js theme={null}
> const recorderElement = Velt.getRecorderElement();
> recorderElement.disablePictureInPicture();
> ```

#### enableRecordingMic

* Turn on user microphone on the recorder control panel.

> [tab] React / Next.js
>
> **Using API:**
>
> ```jsx theme={null}
> const recorderElement = useRecorderUtils();
> recorderElement.enableRecordingMic(); // Enables the microphone.
> recorderElement.disableRecordingMic(); // Disables the microphone.
> ```

> [tab] Other Frameworks
>
> **Using API:**
>
> ```jsx theme={null}
> const recorderElement = Velt.getRecorderElement();
> recorderElement.enableRecordingMic(); // Enables the microphone.
> recorderElement.disableRecordingMic(); // Disables the microphone.
> ```

#### setRecordingQualityConstraints

* Defines quality constraints (e.g., resolution, frame rate) for the raw media input from the user's screen, camera, or microphone, applied before recording begins.

* Higher quality constraints will result in higher upload, download and processing times.

* **Params:** [RecorderQualityConstraints](https://velt.dev/docs/api-reference/sdk/models/data-models.md#recorderqualityconstraints)

* **Returns:** `void`

* **Default:**

```js theme={null}
{
    'safari': {
        audio: {
            sampleRate: 48000,
            echoCancellation: true,
            noiseSuppression: true,
            autoGainControl: true
        },
        video: {
            width: { min: 640, ideal: 1280, max: 1280 },
            height: { min: 360, ideal: 720, max: 720 },
            frameRate: { min: 15, ideal: 20, max: 30 },
            aspectRatio: { ideal: 1.777777778 }
        }
    },
    'other': {
        audio: {
            sampleRate: 48000,
            echoCancellation: true,
            noiseSuppression: true,
            autoGainControl: true
        },
        video: {
            width: { min: 640, ideal: 1280, max: 1280 },
            height: { min: 360, ideal: 720, max: 720 },
            frameRate: { min: 15, ideal: 20, max: 30 },
            aspectRatio: { ideal: 1.777777778 }
        }
    }
}
```

> [tab] React / Next.js
>
> ```jsx theme={null}
> const recorderElement = useRecorderUtils();
>
> recorderElement.setRecordingQualityConstraints({
>     'other': {
>         'video': {
>             width: { exact: 3024  },
>             height: { exact: 1542 },
>             frameRate: { exact: 20 },
>         }
>     }
> });
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> const recorderElement = Velt.getRecorderElement();
>
> recorderElement.setRecordingQualityConstraints({
>     'other': {
>         'video': {
>             width: { exact: 3024  },
>             height: { exact: 1542 },
>             frameRate: { exact: 20 },
>         }
>     }
> });
> ```

#### setRecordingEncodingOptions

* Controls the output quality and size of the video or audio file you save after it's been captured.

* Higher quality options will result in higher upload, download and processing times.

* We automatically select the best file format (MIME type) based on the browser and device compatibility. Here is the preferred order in which this is selected:
  * `video/mp4;codecs=h264,aac`
  * `video/mp4`
  * `audio/mp4`
  * `video/webm;codecs=vp9,opus`
  * `video/webm;codecs=vp8,opus`
  * `video/webm;codecs=h264,opus`
  * `video/webm`

* **Params:** [RecorderEncodingOptions](https://velt.dev/docs/api-reference/sdk/models/data-models.md#recorderencodingoptions)

* **Returns:** `void`

* **Default:**

```js theme={null}
{
  'safari': {
    videoBitsPerSecond: 2500000,
    audioBitsPerSecond: 128000
  },
  'other': {
    videoBitsPerSecond: 1000000,
    audioBitsPerSecond: 128000
  }
}
```

> [tab] React / Next.js
>
> ```jsx theme={null}
> const recorderElement = useRecorderUtils();
>
> recorderElement.setRecordingEncodingOptions({
>     'other': {
>         videoBitsPerSecond: 2000000,
>         audioBitsPerSecond: 128000
>     }
> });
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> const recorderElement = Velt.getRecorderElement();
>
> recorderElement.setRecordingEncodingOptions({
>     'other': {
>         videoBitsPerSecond: 2000000,
>         audioBitsPerSecond: 128000
>     }
> });
> ```

# Permissions

#### requestScreenPermission

* Requests screen capture permissions from the user. This is useful for enabling screen preview functionality in the Recording Preview Dialog.
* **Returns:** `Promise<MediaStream | null>`

> [tab] React / Next.js
>
> ```jsx theme={null}
> const recorderElement = useRecorderUtils();
> await recorderElement.requestScreenPermission();
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> const recorderElement = Velt.getRecorderElement();
> await recorderElement.requestScreenPermission();
> ```

#### askDevicePermission

* Programmatically requests audio and video permissions from the user. This is useful for creating a custom onboarding flow for device permissions.
* **Params:** `RecorderDevicePermissionOptions`
* **Returns:** `Promise<void>`

> [tab] React / Next.js
>
> ```jsx theme={null}
> const recorderElement = useRecorderUtils();
>
> recorderElement.askDevicePermission({
>   audio: true,
>   video: true
> });
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> const recorderElement = Velt.getRecorderElement();
>
> recorderElement.askDevicePermission({
>   audio: true,
>   video: true
> });
> ```

# Data

#### deleteRecordings

* Deletes recordings by their recorder IDs.
* **Params:** [RecorderRequestQuery](https://velt.dev/docs/api-reference/sdk/models/data-models.md#recorderrequestquery) (optional)
* **Returns:** [`Promise<DeleteRecordingsResponse[]>`](https://velt.dev/docs/api-reference/sdk/models/data-models#deleterecordingsresponse)

> [tab] React / Next.js
>
> **Using API:**
>
> ```ts theme={null}
> const recorderElement = useRecorderUtils();
> await recorderElement.deleteRecordings({
>     recorderIds: ['RECORDER_ID_1']
> });
>
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> const recorderElement = Velt.getRecorderElement();
> await recorderElement.deleteRecordings({
>     recorderIds: ['RECORDER_ID_1']
> });
> ```

#### downloadLatestVideo

* Downloads the latest version of a recording.
* **Params:** `recorderId: string`
* **Returns:** `Promise<boolean>`

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

> [tab] Other Frameworks
>
> ```js theme={null}
> const recorderElement = Velt.getRecorderElement();
> await recorderElement.downloadLatestVideo('RECORDER_ID');
> ```

#### fetchRecordings

* Fetches all recordings from either the current document or specified recorder IDs.

* **Params:** [RecorderRequestQuery](https://velt.dev/docs/api-reference/sdk/models/data-models.md#recorderrequestquery) (optional)

* **Returns:** [`Promise<GetRecordingsResponse[]>`](https://velt.dev/docs/api-reference/sdk/models/data-models#getrecordingsresponse)

> [tab] React / Next.js
>
> ```jsx theme={null}
> const recorderElement = useRecorderUtils();
>
> // Fetch all recordings in the current document
> const recorderData = await recorderElement.fetchRecordings();
>
> // Fetch recordings for a specific recorder ID
> const recorderData = await recorderElement.fetchRecordings({
>     recorderIds: ['RECORDER_ID']
> });
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> const recorderElement = Velt.getRecorderElement();
>
> // Fetch all recordings in the current document
> const recorderData = await recorderElement.fetchRecordings();
>
> // Fetch recordings for a specific recorder ID
> const recorderData = await recorderElement.fetchRecordings({
>     recorderIds: ['RECORDER_ID']
> });
> ```

#### getRecordings

* Subscribe to all recording data from either the current document or specified recorder IDs.
* **Params:** [RecorderRequestQuery](https://velt.dev/docs/api-reference/sdk/models/data-models.md#recorderrequestquery) (optional)
* **Returns:** [`Observable<GetRecordingsResponse[]>`](https://velt.dev/docs/api-reference/sdk/models/data-models#getrecordingsresponse)

> [tab] React / Next.js
>
> **Using Hook:**
>
> ```jsx theme={null}
> const recordings = useRecordings(); 
>
> useEffect(() => {
>   console.log('recordings', recordings);
> }, [recordings]);
> ```
>
> **Using API:**
>
> ```jsx theme={null}
> const recorderElement = useRecorderUtils();
> // Subscribe to all recordings in the current document
> recorderElement.getRecordings().subscribe((data) => {
>     console.log('recordings', data);
> });
>
> // Subscribe to recordings with specific recorder IDs
> recorderElement.getRecordings({
>     recorderIds: ['RECORDER_ID']
> }).subscribe((data) => {
>     console.log('recordings', data);
> });
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> const recorderElement = Velt.getRecorderElement();
>
> // Subscribe to all recordings in the current document
> recorderElement.getRecordings().subscribe((data) => {
>     console.log('recordings', data);
> });
>
> // Subscribe to recordings with specific recorder IDs
> recorderElement.getRecordings({
>     recorderIds: ['RECORDER_ID']
> }).subscribe((data) => {
>     console.log('recordings', data);
> });
> ```

# Event Subscription

#### on

* Subscribe to Recorder Events. Here is the list of events you can subscribe to and the event objects you will receive.

| Event Type | Description | Event Object |
| - | - | - |
| `transcriptionDone` | Triggered when a transcription is generated and ready | [TranscriptionDoneEvent](https://velt.dev/docs/api-reference/sdk/models/data-models.md#transcriptiondoneevent) |
| `recordingDoneLocal` | Triggered immediately after a recording annotation is saved locally — before cloud upload and transcription begin. The `assets[0].url` is a blob URL at this point; the permanent CDN URL arrives later via `recordingDone`. Only fires when `sourceFeature === 'recording'`. | [RecordingDoneLocalEvent](https://velt.dev/docs/api-reference/sdk/models/data-models.md#recordingdonelocalevent) |
| `recordingDone` | Triggered when a recording is completed | [RecordingDoneEvent](https://velt.dev/docs/api-reference/sdk/models/data-models.md#recordingdoneevent) |
| `deleteRecording` | Triggered when a recording is deleted | [RecordingDeleteEvent](https://velt.dev/docs/api-reference/sdk/models/data-models.md#recordingdeleteevent) |
| `recordingEditDone` | Triggered when the "Done" button is clicked in the recording editor. Fires after edits are saved, or immediately if no edits were made. | [RecordingEditDoneEvent](https://velt.dev/docs/api-reference/sdk/models/data-models.md#recordingeditdoneevent) |
| `recordingStarted` | Triggered when the recording starts. | [RecordingStartedEvent](https://velt.dev/docs/api-reference/sdk/models/data-models.md#recordingstartedevent) |
| `recordingPaused` | Triggered when the recording is paused. | [RecordingPausedEvent](https://velt.dev/docs/api-reference/sdk/models/data-models.md#recordingpausedevent) |
| `recordingResumed` | Triggered when the recording is resumed after being paused. | [RecordingResumedEvent](https://velt.dev/docs/api-reference/sdk/models/data-models.md#recordingresumedevent) |
| `recordingCancelled` | Triggered when the recording is cancelled. | [RecordingCancelledEvent](https://velt.dev/docs/api-reference/sdk/models/data-models.md#recordingcancelledevent) |
| `recordingStopped` | Triggered when the recording is stopped. | [RecordingStoppedEvent](https://velt.dev/docs/api-reference/sdk/models/data-models.md#recordingstoppedevent) |
| `recordingSaveInitiated` | Triggered when a recording saved is initiated | [RecordingSaveInitiatedEvent](https://velt.dev/docs/api-reference/sdk/models/data-models.md#recordingsaveinitiatedevent) |
| `error` | Triggered when an error occurs. eg: `editFailed`, `recordingFailed`, `transcriptionFailed` | [RecordingErrorEvent](https://velt.dev/docs/api-reference/sdk/models/data-models.md#recordingerrorevent) |

> [tab] React / Next.js
>
> ```jsx theme={null}
> // Hook
> const recorderEventCallbackData = useRecorderEventCallback('transcriptionDone');
> useEffect(() => {
>   if (recorderEventCallbackData) {
>     // Handle recorder action callback event response
>   }
> }, [recorderEventCallbackData]);
>
> // API Method
> const recorderElement = client.getRecorderElement();
> recorderElement.on('transcriptionDone').subscribe((event) => {
>     // Handle the event response
> });
>
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> const recorderElement = Velt.getRecorderElement();
> recorderElement.on('transcriptionDone').subscribe((event) => {
>     // Handle the event response
> });
> ```

# Editor

#### autoOpenVideoEditor

* Controls whether to open the video editor automatically when the recording is done.
* Available in `Velt Recorder Control Panel` component.

Default: `false`

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltRecorderControlPanel autoOpenVideoEditor={true} />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-recorder-control-panel auto-open-video-editor="true"></velt-recorder-control-panel>
> ```

#### retakeOnVideoEditor

* Controls whether to enable the retake button on video editor. This will take the user back to the control panel to start a new recording.

Default: `false`

> [tab] React / Next.js
>
> **Using Props (use any one of the following):**
>
> ```jsx theme={null}
> <VeltRecorderPlayer retakeOnVideoEditor={true} />
> <VeltRecorderControlPanel retakeOnVideoEditor={true} />
> <VeltRecorderTool retakeOnVideoEditor={true} />
> ```
>
> **Using APIs:**
>
> ```jsx theme={null}
> const recorderElement = useRecorderUtils();
>
> // Enable/disable retake button on video editor
> recorderElement.enableRetakeOnVideoEditor();
> recorderElement.disableRetakeOnVideoEditor();
> ```

> [tab] Other Frameworks
>
> **Using Attributes: (use any one of the following)**
>
> ```html theme={null}
> <velt-recorder-player retake-on-video-editor="true"></velt-recorder-player>
> <velt-recorder-control-panel retake-on-video-editor="true"></velt-recorder-control-panel>
> <velt-recorder-tool retake-on-video-editor="true"></velt-recorder-tool>
> ```
>
> **Using APIs:**
>
> ```jsx theme={null}
> const recorderElement = Velt.getRecorderElement();
>
> // Enable/disable retake button on video editor
> recorderElement.enableRetakeOnVideoEditor();
> recorderElement.disableRetakeOnVideoEditor();
> ```

#### enableOnboardingTooltip

* Controls whether to enable the onboarding tooltip on video editor.

Default: `false`

> [tab] React / Next.js
>
> **Using APIs:**
>
> ```jsx theme={null}
> const recorderElement = useRecorderUtils();
>
> // Enable/disable onboarding tooltip
> recorderElement.enableOnboardingTooltip();
> recorderElement.disableOnboardingTooltip();
> ```

> [tab] Other Frameworks
>
> **Using APIs:**
>
> ```jsx theme={null}
> const recorderElement = Velt.getRecorderElement();
>
> // Enable/disable onboarding tooltip
> recorderElement.enableOnboardingTooltip();
> recorderElement.disableOnboardingTooltip();
> ```

#### videoEditor

* Controls whether to enable the video editor for the `Velt Recorder Player`.
* Works for Video and Screen Recordings.
* Available in `Velt Recorder Notes`, `Velt Recorder Player` and `Velt Recorder Control Panel` components. You could use any of these.

Default: `false`

> [tab] React / Next.js
>
> **Using Props:**
>
> ```jsx theme={null}
> // Use any one of these.
> <VeltRecorderNotes videoEditor={true} />
> <VeltRecorderPlayer videoEditor={true}  />
> <VeltRecorderControlPanel videoEditor={true}/>
> ```
>
> **Using API:**
>
> ```jsx theme={null}
> const recorderElement = client.getRecorderElement();
> recorderElement.enableVideoEditor();
> recorderElement.disableVideoEditor();
> ```

> [tab] Other Frameworks
>
> **Using Props:**
>
> ```html theme={null}
> <!-- Use any one of these. -->
> <velt-recorder-notes video-editor="true"></velt-recorder-notes>
> <velt-recorder-player video-editor="true"></velt-recorder-player>
> <velt-recorder-control-panel video-editor="true"></velt-recorder-control-panel>
> ```
>
> **Using API:**
>
> ```jsx theme={null}
> const recorderElement = Velt.getRecorderElement();
> recorderElement.enableVideoEditor();
> recorderElement.disableVideoEditor();
> ```

#### videoEditorTimelinePreview

* Controls whether to display image snapshots of frames in the video editor timeline.
* This helps users quickly navigate to specific scenes without scrubbing through the entire video.

Default: `false`

> [!NOTE]
>
> The timeline preview only works when both `videoEditorTimelinePreview` and `videoEditor` are set to `true`.

> [tab] React / Next.js
>
> **Using Props:**
>
> ```jsx theme={null}
> <VeltRecorderNotes videoEditorTimelinePreview={true} videoEditor={true} />
> <VeltRecorderControlPanel videoEditorTimelinePreview={true} videoEditor={true} />
> ```

> [tab] Other Frameworks
>
> **Using Props:**
>
> ```html theme={null}
> <velt-recorder-notes video-editor-timeline-preview="true" video-editor="true"></velt-recorder-notes>
> <velt-recorder-control-panel video-editor-timeline-preview="true" video-editor="true"></velt-recorder-control-panel>
> ```

# UI/UX

#### openPictureInPicture

* Opens the Picture-in-Picture window during an active recording session.
* This allows programmatic control to open the PiP window for improved multitasking during recording.

> [!WARNING]
>
> Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default.

> [tab] React / Next.js
>
> **Using API:**
>
> ```jsx theme={null}
> const recorderElement = useRecorderUtils();
> recorderElement.openPictureInPicture();
> ```

> [tab] Other Frameworks
>
> **Using API:**
>
> ```js theme={null}
> const recorderElement = Velt.getRecorderElement();
> recorderElement.openPictureInPicture();
> ```

#### exitPictureInPicture

* Closes the Picture-in-Picture window during an active recording session.
* This allows programmatic control to exit the PiP window and return to normal recording view.

> [!WARNING]
>
> Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default.

> [tab] React / Next.js
>
> **Using API:**
>
> ```jsx theme={null}
> const recorderElement = useRecorderUtils();
> recorderElement.exitPictureInPicture();
> ```

> [tab] Other Frameworks
>
> **Using API:**
>
> ```js theme={null}
> const recorderElement = Velt.getRecorderElement();
> recorderElement.exitPictureInPicture();
> ```

#### buttonLabel

Sets a custom label for the `Velt Recorder Tool`.

> [tab] React / Next.js
>
> ```js theme={null}
> <VeltRecorderTool buttonLabel="Your Label Text" />
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> <velt-recorder-tool button-label="Your Label Text"></velt-recorder-tool>
> ```

#### playVideoInFullScreen

* Controls whether to play the recorded video in fullscreen mode.
* You can use this prop on any of the following components:
  * `Velt Recorder Notes`
  * `Velt Recorder Control Panel`
  * `Velt Recorder Player`

Default: `false`

> [tab] React / Next.js
>
> ```jsx theme={null}
> // Change behaviour globally
> <VeltRecorderNotes playVideoInFullScreen={true} />
> <VeltRecorderControlPanel playVideoInFullScreen={true} />
> // Change behaviour for specific player 
> <VeltRecorderPlayer playVideoInFullScreen={true} />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-recorder-notes play-video-in-full-screen="true"></velt-recorder-notes>
> <velt-recorder-control-panel play-video-in-full-screen="true"></velt-recorder-control-panel>
> <velt-recorder-player play-video-in-full-screen="true"></velt-recorder-player>
> ```

#### playbackOnPreviewClick

Control playback behavior on preview click. Enable or disable the click-to-play/pause functionality on recording previews.

Default: `true`

> [tab] React / Next.js
>
> **Using Props:**
>
> ```jsx theme={null}
> <VeltRecorderPlayer playbackOnPreviewClick={true} />
> ```
>
> **Using API:**
>
> ```jsx theme={null}
> const recorderElement = client.getRecorderElement();
> recorderElement.enablePlaybackOnPreviewClick();
> recorderElement.disablePlaybackOnPreviewClick();
> ```

> [tab] Other Frameworks
>
> **Using Props:**
>
> ```html theme={null}
> <velt-recorder-player playback-on-preview-click="true"></velt-recorder-player>
> ```
>
> **Using API:**
>
> ```js theme={null}
> const recorderElement = Velt.getRecorderElement();
> recorderElement.enablePlaybackOnPreviewClick();
> recorderElement.disablePlaybackOnPreviewClick();
> ```

#### recordingCountdown

* Controls whether to display a countdown timer before a recording starts.
* You can either use the props or the API method to enable/disable this feature.

Default: `enabled`

> [tab] React / Next.js
>
> **Using Props:**
>
> ```jsx theme={null}
> <VeltRecorderNotes recordingCountdown={false} />
> <VeltRecorderControlPanel recordingCountdown={false} />
> ```
>
> **Using API:**
>
> ```jsx theme={null}
> const recorderElement = client.getRecorderElement();
> recorderElement.enableRecordingCountdown();
> recorderElement.disableRecordingCountdown();
> ```

> [tab] Other Frameworks
>
> **Using Props:**
>
> ```html theme={null}
> <velt-recorder-notes recording-countdown="false"></velt-recorder-notes>
> <velt-recorder-control-panel recording-countdown="false"></velt-recorder-control-panel>
> ```
>
> **Using API:**
>
> ```jsx theme={null}
> const recorderElement = Velt.getRecorderElement();
> recorderElement.enableRecordingCountdown();
> recorderElement.disableRecordingCountdown();
> ```

#### settingsEmbedded

* Controls whether to embed the settings in the `Velt Recorder Control Panel` component.
* Available in `Velt Recorder Control Panel` component.
* Please use this together with the Control Panel Wireframes so that you can move the settings panel in a different part of the control panel UI.

Default: `false`

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltRecorderControlPanel settingsEmbedded={true} />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-recorder-control-panel settings-embedded="true"></velt-recorder-control-panel>
> ```

#### mode

The `Velt Recorder Control Panel` has two display modes:

* `floating`: Shows a preview in the bottom left corner of the page, regardless of component placement
* `thread`: Displays the component at its placed location in the DOM

Default: `floating`

> [tab] React / Next.js
>
> ```js theme={null}
> <VeltRecorderControlPanel mode="floating" />
> <VeltRecorderControlPanel mode="thread" />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-recorder-control-panel mode="floating"></velt-recorder-control-panel>
> <velt-recorder-control-panel mode="thread"></velt-recorder-control-panel>
> ```

#### type

Sets the recording mode for the `Velt Recorder Tool`.

Available modes:

* `all` - Records audio, video and screen
* `audio` - Records audio only
* `video` - Records video only
* `screen` - Records screen only

Default: `audio`

> [tab] React / Next.js
>
> ```js theme={null}
> <VeltRecorderTool type='all' />
> <VeltRecorderTool type='audio' />
> <VeltRecorderTool type='video' />
> <VeltRecorderTool type='screen' />
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> <velt-recorder-tool type='all'></velt-recorder-tool>
> <velt-recorder-tool type='audio'></velt-recorder-tool>
> <velt-recorder-tool type='video'></velt-recorder-tool>
> <velt-recorder-tool type='screen'></velt-recorder-tool>
> ```

# Legacy Methods

#### onRecordedData

The `onRecordedData` callback is triggered when a recording is completed.

* Callback returns [RecorderData](https://velt.dev/docs/api-reference/sdk/models/data-models.md#recorderdata) object.

> [tab] React / Next.js
>
> **Using Props:**
>
> ```jsx theme={null}
>   const onRecordedData = (recorderAddEvent) => {
>     console.log(recorderAddEvent);
>   }
>   return (
>     <VeltRecorderControlPanel onRecordedData={onRecordedData} />
>   )
>
> ```

> [tab] Other Frameworks
>
> **Using Event Listener:**
>
> ```js theme={null}
> const recorderControlPanel = document.querySelector('velt-recorder-control-panel');
> recorderControlPanel?.addEventListener('onRecordedData', (s) => {
>     console.log('onRecordedData', s.detail);
> });
> ```


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