> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-7bb0f5fc.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-mintlify-7bb0f5fc/Gv_5g4J4Me3Gidtr/images/customization/recorder/media-source-settings-overview.png?fit=max&auto=format&n=Gv_5g4J4Me3Gidtr&q=85&s=1484116db165eae0ffd17a9b8a040dc9" 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-mintlify-7bb0f5fc/Gv_5g4J4Me3Gidtr/images/customization/recorder/media-source-settings-audio-overview.png?fit=max&auto=format&n=Gv_5g4J4Me3Gidtr&q=85&s=1cea89d6c8f6fc0e4d678fcbdd4016f4" 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-mintlify-7bb0f5fc/Gv_5g4J4Me3Gidtr/images/customization/recorder/media-source-settings-audio-toggle-icon.png?fit=max&auto=format&n=Gv_5g4J4Me3Gidtr&q=85&s=982ed7b1029341f9d07368085f778ea0" 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-mintlify-7bb0f5fc/Gv_5g4J4Me3Gidtr/images/customization/recorder/media-source-settings-audio-selected-label.png?fit=max&auto=format&n=Gv_5g4J4Me3Gidtr&q=85&s=43930a7dd4c32027c7db938ffd2e76b1" 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-mintlify-7bb0f5fc/Gv_5g4J4Me3Gidtr/images/customization/recorder/media-source-settings-audio-divider.png?fit=max&auto=format&n=Gv_5g4J4Me3Gidtr&q=85&s=bc4f3859190476563a1e6e062d82de93" 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-mintlify-7bb0f5fc/Gv_5g4J4Me3Gidtr/images/customization/recorder/media-source-settings-audio-options.png?fit=max&auto=format&n=Gv_5g4J4Me3Gidtr&q=85&s=cb026a53b87091dc8b55a08821b4b0ca" 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-mintlify-7bb0f5fc/Gv_5g4J4Me3Gidtr/images/customization/recorder/media-source-settings-audio-options-item.png?fit=max&auto=format&n=Gv_5g4J4Me3Gidtr&q=85&s=057727c19e7cd758e89f094dcca2ab1b" 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-mintlify-7bb0f5fc/Gv_5g4J4Me3Gidtr/images/customization/recorder/media-source-settings-video-overview.png?fit=max&auto=format&n=Gv_5g4J4Me3Gidtr&q=85&s=d6e251f67dd185ebcc0edeb87b71a5df" 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-mintlify-7bb0f5fc/Gv_5g4J4Me3Gidtr/images/customization/recorder/media-source-settings-audio-toggle-icon.png?fit=max&auto=format&n=Gv_5g4J4Me3Gidtr&q=85&s=982ed7b1029341f9d07368085f778ea0" 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-mintlify-7bb0f5fc/Gv_5g4J4Me3Gidtr/images/customization/recorder/media-source-settings-video-selected-label.png?fit=max&auto=format&n=Gv_5g4J4Me3Gidtr&q=85&s=4f9cfcb6340ba83424ccdd3e8f41d8ad" 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-mintlify-7bb0f5fc/Gv_5g4J4Me3Gidtr/images/customization/recorder/media-source-settings-audio-divider.png?fit=max&auto=format&n=Gv_5g4J4Me3Gidtr&q=85&s=bc4f3859190476563a1e6e062d82de93" 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-mintlify-7bb0f5fc/Gv_5g4J4Me3Gidtr/images/customization/recorder/media-source-settings-video-options.png?fit=max&auto=format&n=Gv_5g4J4Me3Gidtr&q=85&s=8889b11d53ae9c480e5dd64c5a5c369e" 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-mintlify-7bb0f5fc/Gv_5g4J4Me3Gidtr/images/customization/recorder/media-source-settings-video-item.png?fit=max&auto=format&n=Gv_5g4J4Me3Gidtr&q=85&s=ad66296d1a3a2b945ea8f2cb367212b7" 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>
