> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velt.dev/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`

<Tabs>
  <Tab title="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>

  <Tab title="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();
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltRecorderPlayer summary={true}/>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    <velt-recorder-player summary={true}></velt-recorder-player>
    ```
  </Tab>
</Tabs>

# 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

<Tabs>
  <Tab title="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>

  <Tab title="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);
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="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>

  <Tab title="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();
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="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>

  <Tab title="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();
    ```
  </Tab>
</Tabs>

#### enableRecordingMic

* Turn on user microphone on the recorder control panel.

<Tabs>
  <Tab title="React / Next.js">
    **Using API:**

    ```jsx theme={null}
    const recorderElement = useRecorderUtils();
    recorderElement.enableRecordingMic(); // Enables the microphone.
    recorderElement.disableRecordingMic(); // Disables the microphone.
    ```
  </Tab>

  <Tab title="Other Frameworks">
    **Using API:**

    ```jsx theme={null}
    const recorderElement = Velt.getRecorderElement();
    recorderElement.enableRecordingMic(); // Enables the microphone.
    recorderElement.disableRecordingMic(); // Disables the microphone.
    ```
  </Tab>
</Tabs>

#### 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](/api-reference/sdk/models/data-models#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 }
        }
    }
}
```

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    const recorderElement = useRecorderUtils();

    recorderElement.setRecordingQualityConstraints({
        'other': {
            'video': {
                width: { exact: 3024  },
                height: { exact: 1542 },
                frameRate: { exact: 20 },
            }
        }
    });
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```js theme={null}
    const recorderElement = Velt.getRecorderElement();

    recorderElement.setRecordingQualityConstraints({
        'other': {
            'video': {
                width: { exact: 3024  },
                height: { exact: 1542 },
                frameRate: { exact: 20 },
            }
        }
    });
    ```
  </Tab>
</Tabs>

#### 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](/api-reference/sdk/models/data-models#recorderencodingoptions)

* **Returns:** `void`

* **Default:**

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    const recorderElement = useRecorderUtils();

    recorderElement.setRecordingEncodingOptions({
        'other': {
            videoBitsPerSecond: 2000000,
            audioBitsPerSecond: 128000
        }
    });
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```js theme={null}
    const recorderElement = Velt.getRecorderElement();

    recorderElement.setRecordingEncodingOptions({
        'other': {
            videoBitsPerSecond: 2000000,
            audioBitsPerSecond: 128000
        }
    });
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    const recorderElement = useRecorderUtils();
    await recorderElement.requestScreenPermission();
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```js theme={null}
    const recorderElement = Velt.getRecorderElement();
    await recorderElement.requestScreenPermission();
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    const recorderElement = useRecorderUtils();

    recorderElement.askDevicePermission({
      audio: true,
      video: true
    });
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```js theme={null}
    const recorderElement = Velt.getRecorderElement();

    recorderElement.askDevicePermission({
      audio: true,
      video: true
    });
    ```
  </Tab>
</Tabs>

# Data

#### deleteRecordings

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

<Tabs>
  <Tab title="React / Next.js">
    **Using API:**

    ```ts theme={null}
    const recorderElement = useRecorderUtils();
    await recorderElement.deleteRecordings({
        recorderIds: ['RECORDER_ID_1']
    });

    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```js theme={null}
    const recorderElement = Velt.getRecorderElement();
    await recorderElement.deleteRecordings({
        recorderIds: ['RECORDER_ID_1']
    });
    ```
  </Tab>
</Tabs>

#### downloadLatestVideo

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

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    const recorderElement = client.getRecorderElement();
    await recorderElement.downloadLatestVideo('RECORDER_ID');
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```js theme={null}
    const recorderElement = Velt.getRecorderElement();
    await recorderElement.downloadLatestVideo('RECORDER_ID');
    ```
  </Tab>
</Tabs>

#### fetchRecordings

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

* **Params:** [RecorderRequestQuery](/api-reference/sdk/models/data-models#recorderrequestquery) (optional)

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

<Tabs>
  <Tab title="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>

  <Tab title="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']
    });
    ```
  </Tab>
</Tabs>

#### getRecordings

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

<Tabs>
  <Tab title="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>

  <Tab title="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);
    });
    ```
  </Tab>
</Tabs>

# 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](/api-reference/sdk/models/data-models#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](/api-reference/sdk/models/data-models#recordingdonelocalevent)         |
| `recordingDone`          | Triggered when a recording is completed                                                                                                                                                                                                                                       | [RecordingDoneEvent](/api-reference/sdk/models/data-models#recordingdoneevent)                   |
| `deleteRecording`        | Triggered when a recording is deleted                                                                                                                                                                                                                                         | [RecordingDeleteEvent](/api-reference/sdk/models/data-models#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](/api-reference/sdk/models/data-models#recordingeditdoneevent)           |
| `recordingStarted`       | Triggered when the recording starts.                                                                                                                                                                                                                                          | [RecordingStartedEvent](/api-reference/sdk/models/data-models#recordingstartedevent)             |
| `recordingPaused`        | Triggered when the recording is paused.                                                                                                                                                                                                                                       | [RecordingPausedEvent](/api-reference/sdk/models/data-models#recordingpausedevent)               |
| `recordingResumed`       | Triggered when the recording is resumed after being paused.                                                                                                                                                                                                                   | [RecordingResumedEvent](/api-reference/sdk/models/data-models#recordingresumedevent)             |
| `recordingCancelled`     | Triggered when the recording is cancelled.                                                                                                                                                                                                                                    | [RecordingCancelledEvent](/api-reference/sdk/models/data-models#recordingcancelledevent)         |
| `recordingStopped`       | Triggered when the recording is stopped.                                                                                                                                                                                                                                      | [RecordingStoppedEvent](/api-reference/sdk/models/data-models#recordingstoppedevent)             |
| `recordingSaveInitiated` | Triggered when a recording saved is initiated                                                                                                                                                                                                                                 | [RecordingSaveInitiatedEvent](/api-reference/sdk/models/data-models#recordingsaveinitiatedevent) |
| `error`                  | Triggered when an error occurs. eg: `editFailed`, `recordingFailed`, `transcriptionFailed`                                                                                                                                                                                    | [RecordingErrorEvent](/api-reference/sdk/models/data-models#recordingerrorevent)                 |

<Tabs>
  <Tab title="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>

  <Tab title="Other Frameworks">
    ```js theme={null}
    const recorderElement = Velt.getRecorderElement();
    recorderElement.on('transcriptionDone').subscribe((event) => {
        // Handle the event response
    });
    ```
  </Tab>
</Tabs>

# Editor

#### autoOpenVideoEditor

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

Default: `false`

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltRecorderControlPanel autoOpenVideoEditor={true} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-recorder-control-panel auto-open-video-editor="true"></velt-recorder-control-panel>
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="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>

  <Tab title="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();
    ```
  </Tab>
</Tabs>

#### enableOnboardingTooltip

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

Default: `false`

<Tabs>
  <Tab title="React / Next.js">
    **Using APIs:**

    ```jsx theme={null}
    const recorderElement = useRecorderUtils();

    // Enable/disable onboarding tooltip
    recorderElement.enableOnboardingTooltip();
    recorderElement.disableOnboardingTooltip();
    ```
  </Tab>

  <Tab title="Other Frameworks">
    **Using APIs:**

    ```jsx theme={null}
    const recorderElement = Velt.getRecorderElement();

    // Enable/disable onboarding tooltip
    recorderElement.enableOnboardingTooltip();
    recorderElement.disableOnboardingTooltip();
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="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>

  <Tab title="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();
    ```
  </Tab>
</Tabs>

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

<Info>The timeline preview only works when both `videoEditorTimelinePreview` and `videoEditor` are set to `true`.</Info>

<Tabs>
  <Tab title="React / Next.js">
    **Using Props:**

    ```jsx theme={null}
    <VeltRecorderNotes videoEditorTimelinePreview={true} videoEditor={true} />
    <VeltRecorderControlPanel videoEditorTimelinePreview={true} videoEditor={true} />
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="React / Next.js">
    **Using API:**

    ```jsx theme={null}
    const recorderElement = useRecorderUtils();
    recorderElement.openPictureInPicture();
    ```
  </Tab>

  <Tab title="Other Frameworks">
    **Using API:**

    ```js theme={null}
    const recorderElement = Velt.getRecorderElement();
    recorderElement.openPictureInPicture();
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="React / Next.js">
    **Using API:**

    ```jsx theme={null}
    const recorderElement = useRecorderUtils();
    recorderElement.exitPictureInPicture();
    ```
  </Tab>

  <Tab title="Other Frameworks">
    **Using API:**

    ```js theme={null}
    const recorderElement = Velt.getRecorderElement();
    recorderElement.exitPictureInPicture();
    ```
  </Tab>
</Tabs>

#### buttonLabel

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

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    <VeltRecorderTool buttonLabel="Your Label Text" />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```js theme={null}
    <velt-recorder-tool button-label="Your Label Text"></velt-recorder-tool>
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    // Change behaviour globally
    <VeltRecorderNotes playVideoInFullScreen={true} />
    <VeltRecorderControlPanel playVideoInFullScreen={true} />
    // Change behaviour for specific player 
    <VeltRecorderPlayer playVideoInFullScreen={true} />
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### playbackOnPreviewClick

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

Default: `true`

<Tabs>
  <Tab title="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>

  <Tab title="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();
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="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>

  <Tab title="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();
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltRecorderControlPanel settingsEmbedded={true} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-recorder-control-panel settings-embedded="true"></velt-recorder-control-panel>
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    <VeltRecorderControlPanel mode="floating" />
    <VeltRecorderControlPanel mode="thread" />
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    <VeltRecorderTool type='all' />
    <VeltRecorderTool type='audio' />
    <VeltRecorderTool type='video' />
    <VeltRecorderTool type='screen' />
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

# Legacy Methods

#### onRecordedData

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

* Callback returns [RecorderData](/api-reference/sdk/models/data-models#recorderdata) object.

<Tabs>
  <Tab title="React / Next.js">
    **Using Props:**

    ```jsx theme={null}
      const onRecordedData = (recorderAddEvent) => {
        console.log(recorderAddEvent);
      }
      return (
        <VeltRecorderControlPanel onRecordedData={onRecordedData} />
      )

    ```
  </Tab>

  <Tab title="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);
    });
    ```
  </Tab>
</Tabs>