> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-7e5f8656.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-7e5f8656/hFnSUDYZrJsu8r5g/images/customization/recorder/media-source-settings-overview.png?fit=max&auto=format&n=hFnSUDYZrJsu8r5g&q=85&s=a545a7ffa8fa2b61c472c1faa751949a" 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-7e5f8656/hFnSUDYZrJsu8r5g/images/customization/recorder/media-source-settings-audio-overview.png?fit=max&auto=format&n=hFnSUDYZrJsu8r5g&q=85&s=380556c662d1c9e7a7c91ab764bbbb6b" 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-7e5f8656/hFnSUDYZrJsu8r5g/images/customization/recorder/media-source-settings-audio-toggle-icon.png?fit=max&auto=format&n=hFnSUDYZrJsu8r5g&q=85&s=e66e14b37374d8eaeb17d20d30e23523" 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-7e5f8656/hFnSUDYZrJsu8r5g/images/customization/recorder/media-source-settings-audio-selected-label.png?fit=max&auto=format&n=hFnSUDYZrJsu8r5g&q=85&s=d056dd689ab58613fea2a7a28d7d41eb" 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-7e5f8656/hFnSUDYZrJsu8r5g/images/customization/recorder/media-source-settings-audio-divider.png?fit=max&auto=format&n=hFnSUDYZrJsu8r5g&q=85&s=f59cfd288ef43196f61e2b4c3c2ce079" 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-7e5f8656/hFnSUDYZrJsu8r5g/images/customization/recorder/media-source-settings-audio-options.png?fit=max&auto=format&n=hFnSUDYZrJsu8r5g&q=85&s=66f3cb529392ae5f4f1403a813b11fe0" 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-7e5f8656/hFnSUDYZrJsu8r5g/images/customization/recorder/media-source-settings-audio-options-item.png?fit=max&auto=format&n=hFnSUDYZrJsu8r5g&q=85&s=f8a562ea88196f9ffae1e804c2841984" 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-7e5f8656/hFnSUDYZrJsu8r5g/images/customization/recorder/media-source-settings-video-overview.png?fit=max&auto=format&n=hFnSUDYZrJsu8r5g&q=85&s=f7b2051fa4ae544978640cdcb0e2652c" 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-7e5f8656/hFnSUDYZrJsu8r5g/images/customization/recorder/media-source-settings-audio-toggle-icon.png?fit=max&auto=format&n=hFnSUDYZrJsu8r5g&q=85&s=e66e14b37374d8eaeb17d20d30e23523" 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-7e5f8656/hFnSUDYZrJsu8r5g/images/customization/recorder/media-source-settings-video-selected-label.png?fit=max&auto=format&n=hFnSUDYZrJsu8r5g&q=85&s=5d7dfab9a03a28eb61fcc6756bf91d3e" 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-7e5f8656/hFnSUDYZrJsu8r5g/images/customization/recorder/media-source-settings-audio-divider.png?fit=max&auto=format&n=hFnSUDYZrJsu8r5g&q=85&s=f59cfd288ef43196f61e2b4c3c2ce079" 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-7e5f8656/hFnSUDYZrJsu8r5g/images/customization/recorder/media-source-settings-video-options.png?fit=max&auto=format&n=hFnSUDYZrJsu8r5g&q=85&s=f29ddfac8b9f1f5055a47ea828e8d798" 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-7e5f8656/hFnSUDYZrJsu8r5g/images/customization/recorder/media-source-settings-video-item.png?fit=max&auto=format&n=hFnSUDYZrJsu8r5g&q=85&s=d12bbf29e0e356e2d5e61a5b474bcb09" 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>
