> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Media Recorder

> Media Recorder — CometChat documentation.

This element allows users to record voice and send them as audio messages. It has a start button to start recording, a stop button to stop recording, a play button to play the recorded message, a submit button to submit the recorded message and a close button to close the media recorder.

## Properties

| Property             | Type               | Description                                                                                                     |
| -------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------- |
| startIconURL         | string             | provides icon to the start Icon/widget that starts recording the audio                                          |
| startIconText        | string             | provides icon to the start Icon/widget that starts recording the audio                                          |
| stopIconURL          | string             | provides icon to the start Icon/widget that stops recording the audio                                           |
| stopIconText         | string             | provides icon to the start Icon/widget that stops recording the audio                                           |
| closeIconURL         | string             | provides icon to the start Icon/widget that closes the CometChatMediaRecorder                                   |
| submitButtonIconURL  | string             | provides icon to the start Icon/widget that utilizes the path audio recorded through the CometChatMediaRecorder |
| submitButtonIconText | string             | provides icon to the start Icon/widget that utilizes the path audio recorded through the CometChatMediaRecorder |
| autoRecording        | boolean            | When set to true, will start the recording on mount. Default value - false                                      |
| recordingType        | string             | Allows us to set the recording type to audio or video.                                                          |
| mediaPlayerStyle     | MediaRecorderStyle | helps to customize the appearance of CometChatMediaRecorder                                                     |

### MediaRecorderStyle

| Name           | Description                                                                                                                                                                          |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| width          | Sets the width of the component                                                                                                                                                      |
| height         | Sets the height of the component                                                                                                                                                     |
| border         | Sets the border of the component                                                                                                                                                     |
| borderRadius   | Sets the border radius of the component                                                                                                                                              |
| background     | Sets all background style properties at once, such as color, image, origin and size, or repeat method. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |
| timerTextFont  | Sets all the different properties of font for the timer text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                                |
| timerTextColor | Sets the foreground color of the timer text.                                                                                                                                         |
| submitIconTint | Sets the tint or color applied to the submit icon                                                                                                                                    |
| startIconTint  | Sets the tint or color applied to the start icon                                                                                                                                     |
| stopIconTint   | Sets the tint or color applied to the stop icon                                                                                                                                      |
| closeIconTint  | Sets the tint or color applied to the close icon                                                                                                                                     |

## Events

Custom events dispatched by the element

| Name                        | Description                                   |
| --------------------------- | --------------------------------------------- |
| cc-media-recorder-submitted | Event emitted when user submits the recording |
| cc-media-recorder-closed    | Event emitted when user closes the recording  |

## Usage

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    import '@cometchat/uikit-elements';//import the web component package.

    const submitRecording = event => {
      console.log(event.detail.url); //the detail property has the image url 
    }

    const closeRecording = event => {
      console.log(event.detail.url); //the detail property has the image url 
    }

    <cometchat-media-recorder autoRecording]="true"  
    :startIconText="Start" 
    :stopIconText="Stop" 
    submitButtonIconText="submit" 
    cc-media-recorder-submitted={submitRecording}
    cc-media-recorder-closed={closeRecording}></cometchat-media-recorder>
    ```
  </Tab>
</Tabs>