Skip to content

Commit

Permalink
feat: voice recording
Browse files Browse the repository at this point in the history
  • Loading branch information
szuperaz committed Sep 30, 2024
1 parent 20daf91 commit cb6768b
Show file tree
Hide file tree
Showing 104 changed files with 2,664 additions and 551 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docusaurus/docs/Angular/assets/voice-recorder.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
187 changes: 187 additions & 0 deletions docusaurus/docs/Angular/code-examples/voice-recordings.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
---
id: voice-recordings
title: Voice recordings
---

import VoiceRecordingScreenshot from "../assets/voice-recording-screenshot.png";
import StartRecording from "../assets/start-voice-recording.png";
import RecordingDemo from "../assets/voice-recording-demo.png";
import Playback from "../assets/voice-recording-playback.png";

The Stream API allows you to send voice recordings as attachments. This is an example attachment:

```json
{
"type": "voiceRecording",
"title": "audio_recording_2024-09-26T14:41:24.473Z.wav",
"asset_url": "https://dublin.stream-io-cdn.com/...",
// This is used to display a visual representation of the voice recording
"waveform_data": [
0.03389095297537962,
0.03389095297537962,
0.19684165186582253 //...
],
// The duration of the recording in seconds
"duration": 31.19,
"file_size": 97964,
"mime_type": "audio/wav"
}
```

## Playing voice recordings

The SDK can play these recordings without any additional setup:

<img src={VoiceRecordingScreenshot} width="500" />

If you'd like to use your own UI, you can provide your own template using the [custom templates service](../../services/CustomTemplatesService/#voicerecordingattachmenttemplate).

## Creating voice recordings

If you want to let users to create voice recordings, you have to configure the SDK with a few easy steps.

### Start recording button

The [message input](../../components/MessageInputComponent) component can display the start recording button optionally. This is how you can enable it:

```html
<stream-message-input
[displayVoiceRecordingButton]="true"
></stream-message-input>
```

This is how the input looks with the button enabled:

<img src={StartRecording} width="500" />

You can also display your own start button. The easiest way is to use the `message-input-start` or `message-input-end` attributes, which will insert the element before or after the textarea element:

```html
<stream-message-input #input [displayVoiceRecordingButton]="false">
<button message-input-start (click)="input.startVoiceRecording()">
Start recording
</button>
</stream-message-input>
```

### Import the `VoiceRecorderModule`

The `VoiceRecorderModule` contains the voice recorder component and the services needed to make a recording. You have to import it like this:

```typescript
import { StreamChatModule, VoiceRecorderModule } from "stream-chat-angular";

@NgModule({
declarations: [AppComponent],
imports: [
// other imports...
StreamChatModule,
VoiceRecorderModule,
// ...more imports
],
bootstrap: [AppComponent],
})
export class AppModule {}
```

### Display the voice recorder component

You have to provide the voice recorder template to the message input component. The SDK provides the `VoiceRecorderComponent` for this:

```html
<stream-message-input [displayVoiceRecordingButton]="true">
<ng-template voice-recorder let-service="service">
<stream-voice-recorder
[voiceRecorderService]="service"
></stream-voice-recorder>
</ng-template>
</stream-message-input>
```

The message input provides a [`VoiceRecorderService`](../../services/VoiceRecorderService) instance, which is used by the two components to communicate.

If you want to use your own UI, provide your own component here that uses `VoiceRecorderService` to communicate with the message input component.

### Voice recorder component

That's it. We can now start a voice recording:

<img src={RecordingDemo} width="500" />

The recording can be paused and resumed. Once a user is finished recording, they can play it back:

<img src={Playback} width="500" />

If they are unhappy with the recording, they can discard it. Once the recording is finalized, they can hit the send button.

### Sending modes

There are two ways to send voice recordings:

1. Once a recording is finalized, you can immediately send a message with the recording; this is the default mode.
2. Once a recording is finalized, you can return it to the message composer and continue editing the message.

This is how you can change between the modes:

```typescript
constructor(private messageInputService: MessageInputConfigService) {
// Defaults to true
// Set false if you want to return to the message composer after a recording was added to the message
this.messageInputService.sendVoiceRecordingImmediately = true;
}
```

### Error states

If an error occurs at any point during the recording, the recording will be stopped, and an error message will be emitted via the [`NotificationService`](../../services/NotificationService). The built-in `stream-notification-list` component will display this error message.

### Custom recording title

You can generate the recording title using your own logic using the `customGenerateRecordingTitle` field of the `AudioRecorderService`.

```typescript
constructor(private audioRecorder: AudioRecorderService, private chatService: ChatClientService) {
this.audioRecorder.customGenerateRecordingTitle = (
options: MediaRecordingTitleOptions
) => {
const extension = options.mimeType.match(/\/([^/;]+)/)?.[1] || "";
return `${
this.chatService.chatClient.user?.name
}-${new Date().toISOString()}.${extension}`;
};
}
```

### Custom transcoding

Due to browser restrictions, the SDK records with the following configuration:

- In Safari: recordings are sent in `mp4` files
- In all other browsers: recordings are created in `webm` and then transcoded into `wav` files

The downside of the `wav` format is that it's uncompressed, which results in a larger file size.

You can provide a custom transcoder to reduce the file size. The following example shows how to transcode to `mp3` using the [`@breezystack/lamejs`](https://www.npmjs.com/package/@breezystack/lamejs) library.

First, install the library:

```
npm install @breezystack/lamejs
```

Then register the custom transcoder to the `TranscoderService`:

```typescript
import { encodeWebmToMp3, TranscoderService } from "stream-chat-angular";
import * as lamejs from "@breezystack/lamejs";

constructor(private transcoderService: TranscoderService) {
transcoderService.customTranscoder = (blob: Blob) => {
if (blob.type.includes('audio/mp4')) {
return blob;
} else {
return encodeWebmToMp3(blob, lamejs);
}
};
}
```
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ The id of the message the attachments belong to

#### Defined in

[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L39)
[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L39)

---

Expand All @@ -134,7 +134,7 @@ The parent id of the message the attachments belong to

#### Defined in

[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L43)
[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L43)

---

Expand All @@ -146,7 +146,7 @@ The attachments to display

#### Defined in

[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L47)
[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L47)

---

Expand All @@ -158,6 +158,6 @@ Emits the state of the image carousel window

#### Defined in

[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L51)
[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L51)

[//]: # "End of generated content"
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ A stream that emits the current file uploads and their states

#### Defined in

[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L17)
[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L17)

---

Expand All @@ -59,7 +59,7 @@ An output to notify the parent component if the user tries to retry a failed upl

#### Defined in

[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L21)
[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L21)

---

Expand All @@ -71,6 +71,6 @@ An output to notify the parent component if the user wants to delete a file

#### Defined in

[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L25)
[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L25)

[//]: # "End of generated content"
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ TextareaInterface.value

#### Defined in

[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L49)
[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L49)

---

Expand All @@ -67,7 +67,7 @@ TextareaInterface.placeholder

#### Defined in

[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53)
[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53)

---

Expand All @@ -83,7 +83,7 @@ TextareaInterface.areMentionsEnabled

#### Defined in

[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57)
[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57)

---

Expand All @@ -99,7 +99,7 @@ TextareaInterface.inputMode

#### Defined in

[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L61)
[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L61)

---

Expand All @@ -115,7 +115,7 @@ TextareaInterface.mentionScope

#### Defined in

[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65)
[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65)

---

Expand All @@ -131,7 +131,7 @@ TextareaInterface.autoFocus

#### Defined in

[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69)
[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69)

---

Expand All @@ -147,7 +147,7 @@ TextareaInterface.valueChange

#### Defined in

[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73)
[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73)

---

Expand All @@ -163,7 +163,7 @@ TextareaInterface.send

#### Defined in

[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77)
[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77)

---

Expand All @@ -179,6 +179,6 @@ TextareaInterface.userMentions

#### Defined in

[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/502385cb9d3f2df94a8714de2a742aeb1edfb77e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L81)
[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/c4925a571484c046f73b9e63286a2e64380af0c6/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L81)

[//]: # "End of generated content"
Loading

0 comments on commit cb6768b

Please sign in to comment.