Media Recorder

Inline audio recording component for the message composer — record, pause, resume, and submit voice messages with real-time waveform visualization.

AI Integration Quick Reference

{
  "component": "CometChatMediaRecorder",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatMediaRecorder } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Inline audio recording component for the message composer with real-time waveform visualization.",
  "cssRootClass": ".cometchat-media-recorder--inline",
  "primaryOutput": {
    "prop": "onSubmit",
    "type": "(file: Blob) => void"
  },
  "props": {
    "behavior": {
      "autoRecording": { "type": "boolean", "default": "false" }
    },
    "callbacks": {
      "onClose": { "type": "() => void", "default": "undefined" },
      "onSubmit": { "type": "(file: Blob) => void", "default": "undefined" },
      "onError": { "type": "(error: Error) => void", "default": "undefined" }
    }
  },
  "subComponents": [
    "CometChatMediaRecorder.Root",
    "CometChatMediaRecorder.RecordingView",
    "CometChatMediaRecorder.PreviewView",
    "CometChatMediaRecorder.Timer",
    "CometChatMediaRecorder.Controls",
    "CometChatMediaRecorder.ErrorView"
  ],
  "types": {
    "CometChatMediaRecorderState": "'idle' | 'recording' | 'paused' | 'error'"
  }
}

Where It Fits

CometChatMediaRecorder is an inline base component rendered inside the message composer for recording voice messages. It displays as a horizontal bar with delete, waveform visualization, timer, and recording controls. The composer’s send button calls inlineSend() from context to stop recording and submit the audio blob.

import { CometChatMediaRecorder } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function VoiceRecorder({ onClose, onSubmit }: {
  onClose: () => void;
  onSubmit: (blob: Blob) => void;
}) {
  return (
    <CometChatMediaRecorder.Root onClose={onClose} onSubmit={onSubmit}>
      <CometChatMediaRecorder.ErrorView />
      <CometChatMediaRecorder.Controls />
      <CometChatMediaRecorder.RecordingView>
        <CometChatMediaRecorder.Timer />
      </CometChatMediaRecorder.RecordingView>
      <CometChatMediaRecorder.PreviewView>
        <CometChatMediaRecorder.Timer />
      </CometChatMediaRecorder.PreviewView>
    </CometChatMediaRecorder.Root>
  );
}

Minimal Render

import { CometChatMediaRecorder } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function Demo() {
  return (
    <CometChatMediaRecorder.Root>
      <CometChatMediaRecorder.ErrorView />
      <CometChatMediaRecorder.Controls />
      <CometChatMediaRecorder.RecordingView>
        <CometChatMediaRecorder.Timer />
      </CometChatMediaRecorder.RecordingView>
      <CometChatMediaRecorder.PreviewView>
        <CometChatMediaRecorder.Timer />
      </CometChatMediaRecorder.PreviewView>
    </CometChatMediaRecorder.Root>
  );
}

Root CSS class: .cometchat-media-recorder--inline

Actions and Events

Callback Props

onSubmit

Called when the composer’s send button triggers inlineSend(). Receives the recorded audio as a Blob.

<CometChatMediaRecorder.Root
  onSubmit={(blob) => {
    const file = new File([blob], "voice-message.webm", { type: blob.type });
    sendMessage(file);
  }}
>
  {/* sub-components */}
</CometChatMediaRecorder.Root>

onClose

Called when the user deletes/cancels the recording.

<CometChatMediaRecorder.Root
  onClose={() => setShowRecorder(false)}
>
  {/* sub-components */}
</CometChatMediaRecorder.Root>

onError

Called when a recording error occurs (permission denied, device unavailable).

<CometChatMediaRecorder.Root
  onError={(error) => console.error('Recording error:', error)}
>
  {/* sub-components */}
</CometChatMediaRecorder.Root>

Common Patterns

Auto-start recording on mount

<CometChatMediaRecorder.Root autoRecording onClose={onClose} onSubmit={onSubmit}>
  <CometChatMediaRecorder.ErrorView />
  <CometChatMediaRecorder.Controls />
  <CometChatMediaRecorder.RecordingView>
    <CometChatMediaRecorder.Timer />
  </CometChatMediaRecorder.RecordingView>
  <CometChatMediaRecorder.PreviewView>
    <CometChatMediaRecorder.Timer />
  </CometChatMediaRecorder.PreviewView>
</CometChatMediaRecorder.Root>

Inline send from composer

The composer’s send button can call inlineSend() from context to stop recording and immediately submit:

import { useCometChatMediaRecorderContext } from "@cometchat/chat-uikit-react";

function ComposerSendButton() {
  const { inlineSend } = useCometChatMediaRecorderContext();
  return <button onClick={inlineSend}>Send</button>;
}

CSS Architecture

The component uses CSS custom properties (design tokens) defined in @cometchat/chat-uikit-react/css-variables.css. Icons use CSS mask images for theme-aware coloring.

Key Selectors

Target	Selector
Root container	.cometchat-media-recorder--inline
Delete button	.cometchat-media-recorder__inline-delete
Record button	.cometchat-media-recorder__inline-record
Recording dot	.cometchat-media-recorder__recording-dot
Waveform	.cometchat-media-recorder__waveform
Waveform bar	.cometchat-media-recorder__waveform-bar
Active bar	.cometchat-media-recorder__waveform-bar--active
Timer	.cometchat-media-recorder__timer
Pause button	.cometchat-media-recorder__inline-pause
Resume button	.cometchat-media-recorder__inline-resume
Error view	.cometchat-media-recorder__inline-error
Close button	.cometchat-media-recorder__inline-close

Customization Matrix

What to change	Where	Property/API	Example
Handle submission	Root props	onSubmit callback	onSubmit={(blob) => send(blob)}
Handle close	Root props	onClose callback	onClose={() => hide()}
Handle errors	Root props	onError callback	onError={(err) => log(err)}
Auto-start	Root props	autoRecording	autoRecording={true}
Hide error view	Composition	Omit ErrorView	Don’t render <ErrorView />
Change visual styling	Global CSS	.cometchat-media-recorder-* selectors	See CSS selectors table

Props

All props are optional unless noted otherwise.

---

autoRecording

Start recording immediately when the component mounts.

Type	boolean
Default	false

---

onClose

Callback invoked when the recording is cancelled or deleted.

Type	() => void
Default	undefined

---

onSubmit

Callback invoked when the recorded audio is submitted. Receives the audio data as a Blob.

Type	(file: Blob) => void
Default	undefined

---

onError

Callback invoked when a recording error occurs.

Type	(error: Error) => void
Default	undefined

---

className

Optional custom CSS class name applied to the root container.

Type	string
Default	undefined

CSS Selectors

Target	Selector
Root	.cometchat-media-recorder--inline
Screen reader only	.cometchat-media-recorder__sr-only
Delete button	.cometchat-media-recorder__inline-delete
Delete icon	.cometchat-media-recorder__inline-delete-icon
Recording dot	.cometchat-media-recorder__recording-dot
Record button	.cometchat-media-recorder__inline-record
Record icon	.cometchat-media-recorder__inline-record-icon
Waveform container	.cometchat-media-recorder__waveform
Waveform bar	.cometchat-media-recorder__waveform-bar
Active waveform bar	.cometchat-media-recorder__waveform-bar--active
Timer	.cometchat-media-recorder__timer
Pause button	.cometchat-media-recorder__inline-pause
Pause icon	.cometchat-media-recorder__inline-pause-icon
Resume button	.cometchat-media-recorder__inline-resume
Resume icon	.cometchat-media-recorder__inline-resume-icon
Error container	.cometchat-media-recorder__inline-error
Error icon	.cometchat-media-recorder__inline-error-icon
Error text	.cometchat-media-recorder__inline-error-text
Close button	.cometchat-media-recorder__inline-close
Close icon	.cometchat-media-recorder__inline-close-icon