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

# Media Source Settings

> Media source settings component.

<Note>
  We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
</Note>

## Overview

<img src="https://mintcdn.com/velt-raghul-agent-docs/NFbSlF53CRhzrBKt/images/customization/recorder/media-source-settings-overview.png?fit=max&auto=format&n=NFbSlF53CRhzrBKt&q=85&s=198387807d0acc300154a933bd4b7482" alt="" width="1280" height="720" data-path="images/customization/recorder/media-source-settings-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltMediaSourceSettingsWireframe>
            <VeltMediaSourceSettingsWireframe.Audio />
            <VeltMediaSourceSettingsWireframe.Video />
        </VeltMediaSourceSettingsWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-media-source-settings-wireframe>
            <velt-media-source-settings-audio-wireframe></velt-media-source-settings-audio-wireframe>
            <velt-media-source-settings-video-wireframe></velt-media-source-settings-video-wireframe>
        </velt-media-source-settings-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## Audio

<img src="https://mintcdn.com/velt-raghul-agent-docs/NFbSlF53CRhzrBKt/images/customization/recorder/media-source-settings-audio-overview.png?fit=max&auto=format&n=NFbSlF53CRhzrBKt&q=85&s=dbee3ea48524a421921e847b922614bf" alt="" width="1280" height="720" data-path="images/customization/recorder/media-source-settings-audio-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltMediaSourceSettingsWireframe.Audio>
            <VeltMediaSourceSettingsWireframe.Audio.ToggleIcon />
            <VeltMediaSourceSettingsWireframe.Audio.SelectedLabel />
            <VeltMediaSourceSettingsWireframe.Audio.Divider />
            <VeltMediaSourceSettingsWireframe.Audio.Options />
        </VeltMediaSourceSettingsWireframe.Audio>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-media-source-settings-audio-wireframe>
            <velt-media-source-settings-toggle-icon-wireframe></velt-media-source-settings-toggle-icon-wireframe>
            <velt-media-source-settings-selected-label-wireframe></velt-media-source-settings-selected-label-wireframe>
            <velt-media-source-settings-divider-wireframe></velt-media-source-settings-divider-wireframe>
            <velt-media-source-settings-options-wireframe></velt-media-source-settings-options-wireframe>
        </velt-media-source-settings-audio-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### ToggleIcon

<img src="https://mintcdn.com/velt-raghul-agent-docs/NFbSlF53CRhzrBKt/images/customization/recorder/media-source-settings-audio-toggle-icon.png?fit=max&auto=format&n=NFbSlF53CRhzrBKt&q=85&s=414d25d951195e6604f679d0ad1d00ff" alt="" width="1280" height="344" data-path="images/customization/recorder/media-source-settings-audio-toggle-icon.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltMediaSourceSettingsWireframe.Audio.ToggleIcon>
            <VeltMediaSourceSettingsWireframe.Audio.ToggleIcon.Open />
            <VeltMediaSourceSettingsWireframe.Audio.ToggleIcon.Close />
        </VeltMediaSourceSettingsWireframe.Audio.ToggleIcon>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
    	<velt-media-source-settings-toggle-icon-wireframe>
    		<velt-media-source-settings-toggle-icon-open-wireframe></velt-media-source-settings-toggle-icon-open-wireframe>
            <velt-media-source-settings-toggle-icon-close-wireframe></velt-media-source-settings-toggle-icon-close-wireframe>
        </velt-media-source-settings-toggle-icon-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### SelectedLabel

<img src="https://mintcdn.com/velt-raghul-agent-docs/NFbSlF53CRhzrBKt/images/customization/recorder/media-source-settings-audio-selected-label.png?fit=max&auto=format&n=NFbSlF53CRhzrBKt&q=85&s=ee8df8552a3c710b911eaf6546725860" alt="" width="1280" height="344" data-path="images/customization/recorder/media-source-settings-audio-selected-label.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltMediaSourceSettingsWireframe.Audio.SelectedLabel />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-media-source-settings-selected-label-wireframe></velt-media-source-settings-selected-label-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Divider

<img src="https://mintcdn.com/velt-raghul-agent-docs/NFbSlF53CRhzrBKt/images/customization/recorder/media-source-settings-audio-divider.png?fit=max&auto=format&n=NFbSlF53CRhzrBKt&q=85&s=ec7e9bcd23c07fedf86def2adabe80a2" alt="" width="1280" height="344" data-path="images/customization/recorder/media-source-settings-audio-divider.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltMediaSourceSettingsWireframe.Audio.Divider />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-media-source-settings-divider-wireframe></velt-media-source-settings-divider-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Options

<img src="https://mintcdn.com/velt-raghul-agent-docs/NFbSlF53CRhzrBKt/images/customization/recorder/media-source-settings-audio-options.png?fit=max&auto=format&n=NFbSlF53CRhzrBKt&q=85&s=cc94556742fabfdd19cdd4f4f624e200" alt="" width="1280" height="496" data-path="images/customization/recorder/media-source-settings-audio-options.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltMediaSourceSettingsWireframe.Audio.Options>
            <VeltMediaSourceSettingsWireframe.Audio.Options.Item />
        </VeltMediaSourceSettingsWireframe.Audio.Options>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-media-source-settings-options-wireframe>
            <velt-media-source-settings-options-item-wireframe></velt-media-source-settings-options-item-wireframe>
        </velt-media-source-settings-options-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Item

<img src="https://mintcdn.com/velt-raghul-agent-docs/NFbSlF53CRhzrBKt/images/customization/recorder/media-source-settings-audio-options-item.png?fit=max&auto=format&n=NFbSlF53CRhzrBKt&q=85&s=cd27e6175196347f5915a5920c378e10" alt="" width="1280" height="496" data-path="images/customization/recorder/media-source-settings-audio-options-item.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltMediaSourceSettingsWireframe.Audio.Options.Item>
            <VeltMediaSourceSettingsWireframe.Audio.Options.Item.Icon />
            <VeltMediaSourceSettingsWireframe.Audio.Options.Item.Label />
        </VeltMediaSourceSettingsWireframe.Audio.Options.Item>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-media-source-settings-options-item-wireframe>
            <velt-media-source-settings-options-item-icon-wireframe></velt-media-source-settings-options-item-icon-wireframe>
            <velt-media-source-settings-options-item-label-wireframe></velt-media-source-settings-options-item-label-wireframe>
        </velt-media-source-settings-options-item-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## Video

<img src="https://mintcdn.com/velt-raghul-agent-docs/NFbSlF53CRhzrBKt/images/customization/recorder/media-source-settings-video-overview.png?fit=max&auto=format&n=NFbSlF53CRhzrBKt&q=85&s=f128a50dc08cc69e2ec9d7bb2ff2dc5a" alt="" width="1280" height="720" data-path="images/customization/recorder/media-source-settings-video-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltMediaSourceSettingsWireframe.Video>
            <VeltMediaSourceSettingsWireframe.Video.ToggleIcon />
            <VeltMediaSourceSettingsWireframe.Video.SelectedLabel />
            <VeltMediaSourceSettingsWireframe.Video.Divider />
            <VeltMediaSourceSettingsWireframe.Video.Options />
        </VeltMediaSourceSettingsWireframe.Video>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-media-source-settings-video-wireframe>
            <velt-media-source-settings-toggle-icon-wireframe></velt-media-source-settings-toggle-icon-wireframe>
            <velt-media-source-settings-selected-label-wireframe></velt-media-source-settings-selected-label-wireframe>
            <velt-media-source-settings-divider-wireframe></velt-media-source-settings-divider-wireframe>
            <velt-media-source-settings-options-wireframe></velt-media-source-settings-options-wireframe>
        </velt-media-source-settings-video-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### ToggleIcon

<img src="https://mintcdn.com/velt-raghul-agent-docs/NFbSlF53CRhzrBKt/images/customization/recorder/media-source-settings-audio-toggle-icon.png?fit=max&auto=format&n=NFbSlF53CRhzrBKt&q=85&s=414d25d951195e6604f679d0ad1d00ff" alt="" width="1280" height="344" data-path="images/customization/recorder/media-source-settings-audio-toggle-icon.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltMediaSourceSettingsWireframe.Video.ToggleIcon>
            <VeltMediaSourceSettingsWireframe.Video.ToggleIcon.Open />
            <VeltMediaSourceSettingsWireframe.Video.ToggleIcon.Close />
        </VeltMediaSourceSettingsWireframe.Video.ToggleIcon>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-media-source-settings-toggle-icon-wireframe>
            <velt-media-source-settings-toggle-icon-open-wireframe></velt-media-source-settings-toggle-icon-open-wireframe>
            <velt-media-source-settings-toggle-icon-close-wireframe></velt-media-source-settings-toggle-icon-close-wireframe>
        </velt-media-source-settings-toggle-icon-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### SelectedLabel

<img src="https://mintcdn.com/velt-raghul-agent-docs/NFbSlF53CRhzrBKt/images/customization/recorder/media-source-settings-video-selected-label.png?fit=max&auto=format&n=NFbSlF53CRhzrBKt&q=85&s=0482f89e3d04225bcdb293a148657b2c" alt="" width="1280" height="344" data-path="images/customization/recorder/media-source-settings-video-selected-label.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltMediaSourceSettingsWireframe.Video.SelectedLabel />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-media-source-settings-selected-label-wireframe></velt-media-source-settings-selected-label-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Divider

<img src="https://mintcdn.com/velt-raghul-agent-docs/NFbSlF53CRhzrBKt/images/customization/recorder/media-source-settings-audio-divider.png?fit=max&auto=format&n=NFbSlF53CRhzrBKt&q=85&s=ec7e9bcd23c07fedf86def2adabe80a2" alt="" width="1280" height="344" data-path="images/customization/recorder/media-source-settings-audio-divider.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltMediaSourceSettingsWireframe.Video.Divider />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-media-source-settings-divider-wireframe></velt-media-source-settings-divider-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Options

<img src="https://mintcdn.com/velt-raghul-agent-docs/NFbSlF53CRhzrBKt/images/customization/recorder/media-source-settings-video-options.png?fit=max&auto=format&n=NFbSlF53CRhzrBKt&q=85&s=8957e7e71bd011ce548a815dfc8d1156" alt="" width="1280" height="496" data-path="images/customization/recorder/media-source-settings-video-options.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltMediaSourceSettingsWireframe.Video.Options>
            <VeltMediaSourceSettingsWireframe.Video.Options.Item />
        </VeltMediaSourceSettingsWireframe.Video.Options>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-media-source-settings-options-wireframe>
            <velt-media-source-settings-options-item-wireframe></velt-media-source-settings-options-item-wireframe>
        </velt-media-source-settings-options-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Item

<img src="https://mintcdn.com/velt-raghul-agent-docs/NFbSlF53CRhzrBKt/images/customization/recorder/media-source-settings-video-item.png?fit=max&auto=format&n=NFbSlF53CRhzrBKt&q=85&s=c032876828eab625050ba1caa1824fc2" alt="" width="1280" height="496" data-path="images/customization/recorder/media-source-settings-video-item.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltMediaSourceSettingsWireframe.Video.Options.Item>
            <VeltMediaSourceSettingsWireframe.Video.Options.Item.Icon />
            <VeltMediaSourceSettingsWireframe.Video.Options.Item.Label />
        </VeltMediaSourceSettingsWireframe.Video.Options.Item>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-media-source-settings-options-item-wireframe>
            <velt-media-source-settings-options-item-icon-wireframe></velt-media-source-settings-options-item-icon-wireframe>
            <velt-media-source-settings-options-item-label-wireframe></velt-media-source-settings-options-item-label-wireframe>
        </velt-media-source-settings-options-item-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>
