-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
103 changed files
with
2,521 additions
and
551 deletions.
There are no files selected for viewing
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.
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.
151 changes: 151 additions & 0 deletions
151
docusaurus/docs/Angular/code-examples/voice-recordings.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| --- | ||
| 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/...", | ||
| "waveform_data": [ | ||
| 0.03389095297537962, | ||
| 0.03389095297537962, | ||
| 0.19684165186582253 //... | ||
| ], | ||
| "duration": 3.119, | ||
| "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 | ||
|
|
||
| However, 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 optionally display the start recording button. 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 instert 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, just simply provide you 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 not happy with the recording, they can simply discard it. Once the reacording 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 to the message composer to continue editing the message. | ||
|
|
||
| This 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 any time during the recording an error occurs, 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 use your own method the generate the title of the recording 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}`; | ||
| }; | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.