> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-c54e9cd8.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-c54e9cd8/cJX3yF5fixXKrcn5/images/customization/recorder/media-source-settings-overview.png?fit=max&auto=format&n=cJX3yF5fixXKrcn5&q=85&s=7e725e4fd8dce08128a60c32165578f2" 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-c54e9cd8/cJX3yF5fixXKrcn5/images/customization/recorder/media-source-settings-audio-overview.png?fit=max&auto=format&n=cJX3yF5fixXKrcn5&q=85&s=b3616df997d63634a02662b1ee8be268" 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-c54e9cd8/cJX3yF5fixXKrcn5/images/customization/recorder/media-source-settings-audio-toggle-icon.png?fit=max&auto=format&n=cJX3yF5fixXKrcn5&q=85&s=bb25c7cf10cd3b7dd4cdb28cc0457251" 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-c54e9cd8/cJX3yF5fixXKrcn5/images/customization/recorder/media-source-settings-audio-selected-label.png?fit=max&auto=format&n=cJX3yF5fixXKrcn5&q=85&s=735bcc1e85a32af72221603f221511ce" 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-c54e9cd8/cJX3yF5fixXKrcn5/images/customization/recorder/media-source-settings-audio-divider.png?fit=max&auto=format&n=cJX3yF5fixXKrcn5&q=85&s=cb9baa25d569bd178af85e8d3d607ab3" 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-c54e9cd8/cJX3yF5fixXKrcn5/images/customization/recorder/media-source-settings-audio-options.png?fit=max&auto=format&n=cJX3yF5fixXKrcn5&q=85&s=c8d44c0706ba2a7048b971a48d4500d1" 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-c54e9cd8/cJX3yF5fixXKrcn5/images/customization/recorder/media-source-settings-audio-options-item.png?fit=max&auto=format&n=cJX3yF5fixXKrcn5&q=85&s=586b24c6b6e5c8975597e46cd787e01a" 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-c54e9cd8/cJX3yF5fixXKrcn5/images/customization/recorder/media-source-settings-video-overview.png?fit=max&auto=format&n=cJX3yF5fixXKrcn5&q=85&s=6be72fbcc87e1f216c0b425b71f78434" 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-c54e9cd8/cJX3yF5fixXKrcn5/images/customization/recorder/media-source-settings-audio-toggle-icon.png?fit=max&auto=format&n=cJX3yF5fixXKrcn5&q=85&s=bb25c7cf10cd3b7dd4cdb28cc0457251" 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-c54e9cd8/cJX3yF5fixXKrcn5/images/customization/recorder/media-source-settings-video-selected-label.png?fit=max&auto=format&n=cJX3yF5fixXKrcn5&q=85&s=fac3a91e1eb2767e50d8c4746e97bebe" 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-c54e9cd8/cJX3yF5fixXKrcn5/images/customization/recorder/media-source-settings-audio-divider.png?fit=max&auto=format&n=cJX3yF5fixXKrcn5&q=85&s=cb9baa25d569bd178af85e8d3d607ab3" 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-c54e9cd8/cJX3yF5fixXKrcn5/images/customization/recorder/media-source-settings-video-options.png?fit=max&auto=format&n=cJX3yF5fixXKrcn5&q=85&s=0ef4cb25352f5dfccb31673a70d79de9" 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-c54e9cd8/cJX3yF5fixXKrcn5/images/customization/recorder/media-source-settings-video-item.png?fit=max&auto=format&n=cJX3yF5fixXKrcn5&q=85&s=c72f4a32b98a4072115d98bfdad40fbd" 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>
