> ## Documentation Index
> Fetch the complete documentation index at: https://velt-v6-0-0-beta-3.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-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/media-source-settings-overview.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=22d7a087aa4a7a6cc03f28a40f5937b8" 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-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/media-source-settings-audio-overview.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=57b4b518525ede5cae2328472990a666" 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-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/media-source-settings-audio-toggle-icon.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=1b45c232b711d68dbea428eee01d182f" 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-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/media-source-settings-audio-selected-label.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=01ddbc30c8d60077cbecb4cee42f7c63" 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-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/media-source-settings-audio-divider.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=ebf39994f8b78c9c3d5a857d2e18ecec" 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-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/media-source-settings-audio-options.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=76453c115ba11d80f4d2f1942f11d3c0" 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-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/media-source-settings-audio-options-item.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=925603af3c2599ab45157468b333ba7d" 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-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/media-source-settings-video-overview.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=d49d93aa2ead21b10b36a7732858b27a" 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-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/media-source-settings-audio-toggle-icon.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=1b45c232b711d68dbea428eee01d182f" 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-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/media-source-settings-video-selected-label.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=f0b246f2c881141ef3637de1f039821f" 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-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/media-source-settings-audio-divider.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=ebf39994f8b78c9c3d5a857d2e18ecec" 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-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/media-source-settings-video-options.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=971eb35fc3223ab8d3a9306651e634a1" 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-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/media-source-settings-video-item.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=27fbfa68b0c85a13552e473be4c0699b" 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>
