Audio Recorder

Recording voice messages is possible by enabling audio recording on MessageInput component.

<MessageInput audioRecordingEnabled />

Once enabled, the MessageInput UI will render a StartRecordingAudioButton.

The default implementation of StartRecordingAudioButton button can be replaced with custom implementation through the Channel component context:

<Channel StartRecordingAudioButton={CustomComponent}>

Click on the recording button will replace the message composer UI with AudioRecorder component UI.

The default AudioRecorder component can be replaced by a custom implementation through the Channel component context:

<Channel AudioRecorder={CustomComponent}>

Browser permissions

Updates in 'microphone' browser permission are observed and handled. If a user clicks the start recording button and the 'microphone' permission state is 'denied', then a notification dialog RecordingPermissionDeniedNotification is rendered.

The dialog can be customized by passing own component to Channel component context:

<Channel RecordingPermissionDeniedNotification={CustomComponent}>

Custom encoding

By default, the recording is encoded into audio/wav format. In order to reduce the size you can use MP3 encoder that is based on lamejs implementation. Follow these steps to achieve the MP3 encoding capability.

1. The library @breezystack/lamejs has to be installed as this is a peer dependency to stream-chat-react.

npm install @breezystack/lamejs

yarn add @breezystack/lamejs

2. The MP3 encoder has to be imported separately as a plugin:

import { MessageInput } from "stream-chat-react";
import { encodeToMp3 } from "stream-chat-react/mp3-encoder";

<MessageInput
  focus
  audioRecordingConfig={{ transcoderConfig: { encoder: encodeToMp3 } }}
/>;

Audio recorder states

The AudioRecorder UI switches between the following states

1. Recording state

The recording can be paused or stopped.

2. Paused state

The recording can be stopped or resumed.

3. Stopped state

The recording can be played back before it is sent.

At any time, the recorder allows to cancel the recording and return to message composer UI by clicking the button with the bin icon.

The message sending behavior

The resulting recording is always uploaded on the recording completion. The recording is completed when user stops the recording and confirms the completion with a send button.

The behavior, when a message with the given recording attachment is sent, however, can be controlled through the asyncMessagesMultiSendEnabled configuration prop on MessageInput.

<MessageInput asyncMessagesMultiSendEnabled audioRecordingEnabled />

And so the message is sent depending on asyncMessagesMultiSendEnabled value as follows:

Audio recorder controller

The components consuming the MessageInputContext can access the recording state through the recordingController:

import { useMessageInputContext } from "stream-chat-react";

const Component = () => {
  const {
    recordingController: {
      completeRecording,
      permissionState,
      recorder,
      recording,
      recordingState,
    },
  } = useMessageInputContext();
};

The controller exposes the following API: