Skip to main content
Usage CometChatMediaRecorder can be used as a child component inside another component or be launched with a bottom/modal sheet.
  • TypeScript
<CometChatBottomSheet
      ref={sheetRef}
      onClose={onClose}
      style={cometChatBottomSheetStyle}
    >
      <CometChatMediaRecorder
        onClose={onClose}
        onPause={onPause}
        onPlay={onPlay}
        onSend={onSend}
        onStop={onStop}
        onStart={onStart}
        recordedFile={recordedFile}
        recordedPlaying={recordedPlaying}
        mediaRecorderStyle={mediaRecorderStyle}
        pauseIconUrl={pauseIconUrl}
        playIconUrl={playIconUrl}
        recordIconUrl={recordIconUrl}
        deleteIconUrl={deleteIconUrl}
        stopIconUrl={stopIconUrl}
        submitIconUrl={submitIconUrl}
      />
    </CometChatBottomSheet>

​
Properties

PropertyTypeDescription
onCloseFunctiona callback executed on tapping the close icon
onPlayFunctiona callback executed on tapping the play icon
onPauseFunctiona callback executed on tapping the pause icon
onStopFunctiona callback executed on tapping the stop icon
onSendFunctiona callback executed on tapping the send icon
onStartFunctiona callback executed on tapping the start icon
mediaRecorderStyleMediaRecorderStyleused to customize the appearance of CometChatMediaRecorder
recordedFileStringused to get the recorded audio file path
recordedPlayingbooleanused to set the play and pause of the recording
pauseIconUrlImageprovides icon to the pause Icon
playIconUrlImageused to set the play Icon
recordIconUrlImageused to set record Icon
deleteIconUrlImageused to set delete Icon
stopIconUrlImageused to set stop Icon
submitIconUrlImageused to set submit Icon

​
mediaRecorderStyle

A MediaRecorderStyle object is used to customize the appearance of CometChatMediaRecorder.
  • TypeScript
// create a MediaRecorderStyle object
const mediaRecorderStyle = new MediaRecorderStyle({
        pauseIconTint = "rgb(51, 153, 255)",
        playIconTint = "rgb(51, 153, 255)",
        closeIconTint = "rgba(20, 20, 20, 0.58)",
        startIconTint = "rgb(51, 153, 255)",
        stopIconTint = "rgb(237, 26, 26)",
        submitIconTint = "rgba(237, 26, 26)",
        audioBarTint = "rgba(20, 20, 20, 0.58)",
        timerTextFont = undefined,
        timerTextstyle = "normal",
        timerTextColor = theme?.palette.getAccent50(),
        ...messagesStyle
    });

// pass that MediaRecorderStyle object to CometChatMediaRecorder
<CometChatMediaRecorder
  ...
  mediaRecorderStyle={mediaRecorderStyle}
  ...
/>