@corti/dictation-web 0.0.0-rc.359
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +156 -0
- package/dist/CortiDictation.d.ts +51 -0
- package/dist/CortiDictation.js +281 -0
- package/dist/CortiDictation.js.map +1 -0
- package/dist/DictationService.d.ts +16 -0
- package/dist/DictationService.js +88 -0
- package/dist/DictationService.js.map +1 -0
- package/dist/RecorderManager.d.ts +25 -0
- package/dist/RecorderManager.js +145 -0
- package/dist/RecorderManager.js.map +1 -0
- package/dist/audioService.d.ts +6 -0
- package/dist/audioService.js +21 -0
- package/dist/audioService.js.map +1 -0
- package/dist/bundle.js +11064 -0
- package/dist/components/audio-visualiser.d.ts +12 -0
- package/dist/components/audio-visualiser.js +65 -0
- package/dist/components/audio-visualiser.js.map +1 -0
- package/dist/components/settings-menu.d.ts +20 -0
- package/dist/components/settings-menu.js +185 -0
- package/dist/components/settings-menu.js.map +1 -0
- package/dist/constants.d.ts +3 -0
- package/dist/constants.js +16 -0
- package/dist/constants.js.map +1 -0
- package/dist/icons/icons.d.ts +17 -0
- package/dist/icons/icons.js +158 -0
- package/dist/icons/icons.js.map +1 -0
- package/dist/icons/index.d.ts +1 -0
- package/dist/icons/index.js +2 -0
- package/dist/icons/index.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +6 -0
- package/dist/index.js.map +1 -0
- package/dist/styles/ComponentStyles.d.ts +2 -0
- package/dist/styles/ComponentStyles.js +53 -0
- package/dist/styles/ComponentStyles.js.map +1 -0
- package/dist/styles/buttons.d.ts +2 -0
- package/dist/styles/buttons.js +58 -0
- package/dist/styles/buttons.js.map +1 -0
- package/dist/styles/callout.d.ts +2 -0
- package/dist/styles/callout.js +33 -0
- package/dist/styles/callout.js.map +1 -0
- package/dist/styles/select.d.ts +2 -0
- package/dist/styles/select.js +36 -0
- package/dist/styles/select.js.map +1 -0
- package/dist/styles/theme.d.ts +2 -0
- package/dist/styles/theme.js +56 -0
- package/dist/styles/theme.js.map +1 -0
- package/dist/types.d.ts +8 -0
- package/dist/types.js +2 -0
- package/dist/types.js.map +1 -0
- package/dist/utils.d.ts +59 -0
- package/dist/utils.js +179 -0
- package/dist/utils.js.map +1 -0
- package/package.json +120 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Corti
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
# Corti Dictation Web Component
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
The **Corti Dictation Web Component** is a web component that enables real-time speech-to-text dictation using Corti's Dictation API. It provides a simple interface for capturing audio, streaming it to the API, and handling transcripts.
|
|
6
|
+
|
|
7
|
+
> **Note:** OAuth 2.0 authentication is not handled by this library. The client must provide an API key or authorization token before using the component.
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
Include the Web Component in your project by importing the JavaScript module:
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
npm i @corti/dictation-web
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Then import the module like so:
|
|
18
|
+
|
|
19
|
+
```js
|
|
20
|
+
// Import the Corti Dictation Web Component
|
|
21
|
+
import '@corti/dictation-web';
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Alternatively, use a CDN to start quickly (not recommended).
|
|
25
|
+
|
|
26
|
+
```html
|
|
27
|
+
<script
|
|
28
|
+
src="https://cdn.jsdelivr.net/npm/@corti/dictation-web/dist/bundle.min.js"
|
|
29
|
+
preload
|
|
30
|
+
type="module"
|
|
31
|
+
></script>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Usage
|
|
35
|
+
|
|
36
|
+
### Demo
|
|
37
|
+
|
|
38
|
+
🚀 [Hosted Demo](https://codepen.io/hccullen/pen/OPJmxQR)
|
|
39
|
+
|
|
40
|
+
### Basic Example
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
<!DOCTYPE html>
|
|
44
|
+
<html lang="en">
|
|
45
|
+
<body>
|
|
46
|
+
<corti-dictation id="dictation"></corti-dictation>
|
|
47
|
+
<textarea
|
|
48
|
+
id="transcript"
|
|
49
|
+
placeholder="Transcript will appear here..."
|
|
50
|
+
></textarea>
|
|
51
|
+
|
|
52
|
+
<script>
|
|
53
|
+
import '@corti/dictation-web';
|
|
54
|
+
const dictationEl = document.getElementById('dictation');
|
|
55
|
+
dictationEl.addEventListener('ready', () => {
|
|
56
|
+
dictationEl.setAccessToken('YOUR_AUTH_TOKEN'); // Note: Never hardcode tokens
|
|
57
|
+
});
|
|
58
|
+
dictationEl.addEventListener('transcript', e => {
|
|
59
|
+
document.getElementById('transcript').value += e.detail.data.text + ' ';
|
|
60
|
+
});
|
|
61
|
+
</script>
|
|
62
|
+
</body>
|
|
63
|
+
</html>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## API Reference
|
|
67
|
+
|
|
68
|
+
### Properties
|
|
69
|
+
|
|
70
|
+
| Property | Type | Description |
|
|
71
|
+
| -------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- |
|
|
72
|
+
| `devices` | Array | List of available recording devices. |
|
|
73
|
+
| `selectedDevice` | Object | The selected device used for recording (MediaDeviceInfo). |
|
|
74
|
+
| `recordingState` | String | Current state of recording (`stopped`, `recording`, `initializing` and `stopping`, ). |
|
|
75
|
+
| `dictationConfig` | Object | Configuration settings for dictation. |
|
|
76
|
+
| `languagesSupported` | String[] | List of all language codes available for use with the Web Component. |
|
|
77
|
+
| `debug_displayAudio` | Boolean | Overrides any device selection and instead uses getDisplayMedia to stream system audio. Should only be used for debugging |
|
|
78
|
+
|
|
79
|
+
### Methods
|
|
80
|
+
|
|
81
|
+
| Method | Description |
|
|
82
|
+
| -------------------------------------- | ---------------------------------------------------------------- |
|
|
83
|
+
| `toggleRecording()` | Starts or stops recording. |
|
|
84
|
+
| `setAccessToken(access_token: string)` | Set the latest access token. This will return the server config. |
|
|
85
|
+
| `setAuthConfig(config: AuthConfig)` | Set authentication configuration with optional refresh mechanism. |
|
|
86
|
+
|
|
87
|
+
### Events
|
|
88
|
+
|
|
89
|
+
| Event | Description |
|
|
90
|
+
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
91
|
+
| `ready` | Fired once the component is ready. |
|
|
92
|
+
| `recording-state-changed` | Fired when the recording state changes. `detail.state` contains the new state. |
|
|
93
|
+
| `recording-devices-changed` | Fired when the user switches recording devices or the list of recording devices changes. `detail.devices` contains the full devices list. `detail.selectedDevice` contains the current selected device. |
|
|
94
|
+
| `transcript` | Fired when a new transcript is received. `detail.data.text` contains the transcribed text. |
|
|
95
|
+
| `command` | Fired whenever a new command is detected. |
|
|
96
|
+
| `audio-level-changed` | Fired when the input audio level changes. `detail.audioLevel` contains the new level. |
|
|
97
|
+
| `usage` | Fired when usage information is received from the server. `detail.credits` contains the usage data. |
|
|
98
|
+
| `stream-closed` | Fired when the WebSocket stream is closed. `detail` contains the close event data. |
|
|
99
|
+
| `error` | Fired on error. `detail` contains the full error. |
|
|
100
|
+
|
|
101
|
+
## Authentication
|
|
102
|
+
|
|
103
|
+
This library supports multiple authentication methods:
|
|
104
|
+
|
|
105
|
+
### Basic Bearer Token
|
|
106
|
+
```javascript
|
|
107
|
+
dictation.setAccessToken('YOUR_JWT_TOKEN');
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### With Refresh Token Support
|
|
111
|
+
|
|
112
|
+
The library can automatically refresh tokens when they expire:
|
|
113
|
+
|
|
114
|
+
```javascript
|
|
115
|
+
dictation.setAuthConfig({
|
|
116
|
+
// This function runs before any API call when the access_token is near expiration
|
|
117
|
+
refreshAccessToken: async (refreshToken?: string) => {
|
|
118
|
+
// Custom refresh logic -- get new access_token from server
|
|
119
|
+
// if accessToken is not passed to AuthConfig, refreshToken will be `undefined` for the first call,
|
|
120
|
+
// then it will be the refreshToken returned from the previous token request
|
|
121
|
+
const response = await fetch("https://your-auth-server/token", {
|
|
122
|
+
method: "POST",
|
|
123
|
+
headers: { "Content-Type": "application/json" },
|
|
124
|
+
body: JSON.stringify({ refreshToken }),
|
|
125
|
+
});
|
|
126
|
+
|
|
127
|
+
const result = await response.json();
|
|
128
|
+
|
|
129
|
+
// Return in the expected format
|
|
130
|
+
return {
|
|
131
|
+
accessToken: result.accessToken,
|
|
132
|
+
refreshToken: result.refreshToken,
|
|
133
|
+
};
|
|
134
|
+
}
|
|
135
|
+
});
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
The refresh mechanism automatically handles token renewal when the access token is near expiration, ensuring uninterrupted dictation sessions.
|
|
139
|
+
|
|
140
|
+
## Usage Examples
|
|
141
|
+
|
|
142
|
+
Explore practical implementations and usage examples in the [Demo Folder](https://github.com/corticph/dictation-web-sdk/tree/main/demo). These demos can also be run locally.
|
|
143
|
+
|
|
144
|
+
## Styling
|
|
145
|
+
|
|
146
|
+

|
|
147
|
+
|
|
148
|
+
The default UI is designed to be slotted into existing applications seamlessly, however, it also supports custom styling as well as theming. The UI can be fully customized using CSS properties. Refer to our [Styling Guide](https://github.com/corticph/dictation-web-sdk/blob/main/docs/styling.md) for detailed instructions.
|
|
149
|
+
|
|
150
|
+
## License
|
|
151
|
+
|
|
152
|
+
This Web Component library is licensed under MIT.
|
|
153
|
+
|
|
154
|
+
## Support
|
|
155
|
+
|
|
156
|
+
For issues or questions, contact **Corti Support** at [support@corti.ai](mailto:help@corti.ai).
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { type Corti } from '@corti/sdk';
|
|
2
|
+
import { LitElement } from 'lit';
|
|
3
|
+
import './components/settings-menu.js';
|
|
4
|
+
import './components/audio-visualiser.js';
|
|
5
|
+
import './icons/icons.js';
|
|
6
|
+
import type { RecordingState, ServerConfig } from './types.js';
|
|
7
|
+
export declare class CortiDictation extends LitElement {
|
|
8
|
+
static styles: import("lit").CSSResult[];
|
|
9
|
+
dictationConfig: Corti.TranscribeConfig;
|
|
10
|
+
languagesSupported: Corti.TranscribeSupportedLanguage[];
|
|
11
|
+
debug_displayAudio: boolean;
|
|
12
|
+
private _serverConfig;
|
|
13
|
+
private _audioLevel;
|
|
14
|
+
private _recordingState;
|
|
15
|
+
private _selectedDevice;
|
|
16
|
+
private _devices;
|
|
17
|
+
private recorderManager;
|
|
18
|
+
connectedCallback(): Promise<void>;
|
|
19
|
+
toggleRecording(): void;
|
|
20
|
+
/**
|
|
21
|
+
* Sets the access token and returns the server configuration.
|
|
22
|
+
*
|
|
23
|
+
* NOTE: We decode the token here only for backward compatibility in return values.
|
|
24
|
+
* The SDK now handles token parsing internally, so this return value should be
|
|
25
|
+
* reduced in the future to only include necessary fields.
|
|
26
|
+
*/
|
|
27
|
+
setAccessToken(token: string): {
|
|
28
|
+
environment: string;
|
|
29
|
+
tenant: string;
|
|
30
|
+
accessToken: string;
|
|
31
|
+
expiresAt: number | undefined;
|
|
32
|
+
} | undefined;
|
|
33
|
+
/**
|
|
34
|
+
* Sets the authentication configuration and returns the server configuration.
|
|
35
|
+
*
|
|
36
|
+
* NOTE: We decode tokens here only for backward compatibility in return values.
|
|
37
|
+
* The SDK now handles token parsing internally, so this return value should be
|
|
38
|
+
* reduced in the future to only include necessary fields.
|
|
39
|
+
*/
|
|
40
|
+
setAuthConfig(config: Corti.BearerOptions): Promise<ServerConfig>;
|
|
41
|
+
get selectedDevice(): MediaDeviceInfo | null;
|
|
42
|
+
get recordingState(): RecordingState;
|
|
43
|
+
get devices(): MediaDeviceInfo[];
|
|
44
|
+
setRecordingDevice(device: MediaDeviceInfo): Promise<void>;
|
|
45
|
+
setPrimaryLanguage(language: string): void;
|
|
46
|
+
_toggleRecording(): void;
|
|
47
|
+
_onRecordingDevicesChanged(event: Event): Promise<void>;
|
|
48
|
+
_onLanguageChanged(event: Event): void;
|
|
49
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
50
|
+
}
|
|
51
|
+
export default CortiDictation;
|
|
@@ -0,0 +1,281 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
// corti-dictation.ts
|
|
8
|
+
import { html, LitElement } from 'lit';
|
|
9
|
+
import { property, state } from 'lit/decorators.js';
|
|
10
|
+
import { RecorderManager } from './RecorderManager.js';
|
|
11
|
+
import './components/settings-menu.js';
|
|
12
|
+
import './components/audio-visualiser.js';
|
|
13
|
+
import './icons/icons.js';
|
|
14
|
+
import ThemeStyles from './styles/theme.js';
|
|
15
|
+
import ButtonStyles from './styles/buttons.js';
|
|
16
|
+
import ComponentStyles from './styles/ComponentStyles.js';
|
|
17
|
+
import { DEFAULT_DICTATION_CONFIG, LANGUAGES_SUPPORTED } from './constants.js';
|
|
18
|
+
import CalloutStyles from './styles/callout.js';
|
|
19
|
+
import { decodeToken } from './utils.js';
|
|
20
|
+
export class CortiDictation extends LitElement {
|
|
21
|
+
constructor() {
|
|
22
|
+
super(...arguments);
|
|
23
|
+
this.dictationConfig = DEFAULT_DICTATION_CONFIG;
|
|
24
|
+
this.languagesSupported = LANGUAGES_SUPPORTED;
|
|
25
|
+
this.debug_displayAudio = false;
|
|
26
|
+
this._audioLevel = 0;
|
|
27
|
+
this._recordingState = 'stopped';
|
|
28
|
+
this._devices = [];
|
|
29
|
+
this.recorderManager = new RecorderManager();
|
|
30
|
+
}
|
|
31
|
+
async connectedCallback() {
|
|
32
|
+
super.connectedCallback();
|
|
33
|
+
const devices = await this.recorderManager.initialize();
|
|
34
|
+
if (devices.selectedDevice) {
|
|
35
|
+
this._selectedDevice = this.recorderManager.selectedDevice;
|
|
36
|
+
this._devices = this.recorderManager.devices;
|
|
37
|
+
this.dispatchEvent(new CustomEvent('ready'));
|
|
38
|
+
}
|
|
39
|
+
// Map event names to any extra handling logic
|
|
40
|
+
const eventHandlers = {
|
|
41
|
+
'recording-state-changed': e => {
|
|
42
|
+
this._recordingState = e.detail.state;
|
|
43
|
+
},
|
|
44
|
+
'devices-changed': () => {
|
|
45
|
+
this._devices = [...this.recorderManager.devices];
|
|
46
|
+
this.requestUpdate();
|
|
47
|
+
},
|
|
48
|
+
'audio-level-changed': e => {
|
|
49
|
+
this._audioLevel = e.detail.audioLevel;
|
|
50
|
+
this.requestUpdate();
|
|
51
|
+
},
|
|
52
|
+
};
|
|
53
|
+
const eventsToRelay = [
|
|
54
|
+
'recording-state-changed',
|
|
55
|
+
'recording-devices-changed',
|
|
56
|
+
'audio-level-changed',
|
|
57
|
+
'error',
|
|
58
|
+
'transcript',
|
|
59
|
+
'command',
|
|
60
|
+
'ready',
|
|
61
|
+
'usage',
|
|
62
|
+
'stream-closed',
|
|
63
|
+
];
|
|
64
|
+
eventsToRelay.forEach(eventName => {
|
|
65
|
+
this.recorderManager.addEventListener(eventName, (e) => {
|
|
66
|
+
const customEvent = e;
|
|
67
|
+
// Perform any additional handling if defined
|
|
68
|
+
if (eventHandlers[eventName]) {
|
|
69
|
+
eventHandlers[eventName](customEvent);
|
|
70
|
+
}
|
|
71
|
+
// Re-dispatch the event from the component
|
|
72
|
+
this.dispatchEvent(new CustomEvent(eventName, {
|
|
73
|
+
detail: customEvent.detail,
|
|
74
|
+
bubbles: eventName !== 'error',
|
|
75
|
+
composed: true,
|
|
76
|
+
}));
|
|
77
|
+
});
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
toggleRecording() {
|
|
81
|
+
this._toggleRecording();
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Sets the access token and returns the server configuration.
|
|
85
|
+
*
|
|
86
|
+
* NOTE: We decode the token here only for backward compatibility in return values.
|
|
87
|
+
* The SDK now handles token parsing internally, so this return value should be
|
|
88
|
+
* reduced in the future to only include necessary fields.
|
|
89
|
+
*/
|
|
90
|
+
setAccessToken(token) {
|
|
91
|
+
try {
|
|
92
|
+
const decoded = decodeToken(token);
|
|
93
|
+
this._serverConfig = decoded;
|
|
94
|
+
return decoded;
|
|
95
|
+
}
|
|
96
|
+
catch (e) {
|
|
97
|
+
throw new Error('Invalid token');
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
/**
|
|
101
|
+
* Sets the authentication configuration and returns the server configuration.
|
|
102
|
+
*
|
|
103
|
+
* NOTE: We decode tokens here only for backward compatibility in return values.
|
|
104
|
+
* The SDK now handles token parsing internally, so this return value should be
|
|
105
|
+
* reduced in the future to only include necessary fields.
|
|
106
|
+
*/
|
|
107
|
+
async setAuthConfig(config) {
|
|
108
|
+
try {
|
|
109
|
+
const initialToken = 'accessToken' in config
|
|
110
|
+
? { accessToken: config.accessToken, refreshToken: config.refreshToken }
|
|
111
|
+
: await config.refreshAccessToken();
|
|
112
|
+
if (!initialToken?.accessToken ||
|
|
113
|
+
typeof initialToken.accessToken !== 'string') {
|
|
114
|
+
throw new Error('Access token is required and must be a string');
|
|
115
|
+
}
|
|
116
|
+
// Decode tokens only for return value compatibility
|
|
117
|
+
// The SDK handles its own token parsing internally
|
|
118
|
+
const decoded = decodeToken(initialToken.accessToken);
|
|
119
|
+
if (!decoded) {
|
|
120
|
+
throw new Error('Invalid token format');
|
|
121
|
+
}
|
|
122
|
+
this._serverConfig = {
|
|
123
|
+
environment: decoded.environment,
|
|
124
|
+
tenant: decoded.tenant,
|
|
125
|
+
accessToken: initialToken.accessToken,
|
|
126
|
+
refreshToken: config.refreshToken,
|
|
127
|
+
refreshAccessToken: async (refreshToken) => {
|
|
128
|
+
try {
|
|
129
|
+
if (!config.refreshAccessToken) {
|
|
130
|
+
return {
|
|
131
|
+
accessToken: this._serverConfig?.accessToken || 'no_token',
|
|
132
|
+
expiresIn: Infinity,
|
|
133
|
+
refreshToken,
|
|
134
|
+
};
|
|
135
|
+
}
|
|
136
|
+
const response = await config.refreshAccessToken(refreshToken);
|
|
137
|
+
if (this._serverConfig) {
|
|
138
|
+
this._serverConfig.accessToken = response.accessToken;
|
|
139
|
+
this._serverConfig.refreshToken = response.refreshToken;
|
|
140
|
+
}
|
|
141
|
+
return response;
|
|
142
|
+
}
|
|
143
|
+
catch (e) {
|
|
144
|
+
throw new Error('Error when refreshing access token');
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
};
|
|
148
|
+
return this._serverConfig;
|
|
149
|
+
}
|
|
150
|
+
catch (e) {
|
|
151
|
+
throw new Error('Invalid config');
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
get selectedDevice() {
|
|
155
|
+
return this.recorderManager.selectedDevice || null;
|
|
156
|
+
}
|
|
157
|
+
get recordingState() {
|
|
158
|
+
return this._recordingState;
|
|
159
|
+
}
|
|
160
|
+
get devices() {
|
|
161
|
+
return this._devices;
|
|
162
|
+
}
|
|
163
|
+
async setRecordingDevice(device) {
|
|
164
|
+
this.recorderManager.selectedDevice = device;
|
|
165
|
+
this._selectedDevice = device;
|
|
166
|
+
if (!this._serverConfig)
|
|
167
|
+
return;
|
|
168
|
+
if (this._recordingState === 'recording') {
|
|
169
|
+
await this.recorderManager.stopRecording();
|
|
170
|
+
await this.recorderManager.startRecording({
|
|
171
|
+
dictationConfig: this.dictationConfig,
|
|
172
|
+
serverConfig: this._serverConfig,
|
|
173
|
+
});
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
setPrimaryLanguage(language) {
|
|
177
|
+
if (LANGUAGES_SUPPORTED.includes(language)) {
|
|
178
|
+
this.dictationConfig = {
|
|
179
|
+
...this.dictationConfig,
|
|
180
|
+
primaryLanguage: language,
|
|
181
|
+
};
|
|
182
|
+
// If recording is in progress, restart to apply the language change
|
|
183
|
+
if (this._serverConfig && this._recordingState === 'recording') {
|
|
184
|
+
this.recorderManager.stopRecording();
|
|
185
|
+
this.recorderManager.startRecording({
|
|
186
|
+
dictationConfig: this.dictationConfig,
|
|
187
|
+
serverConfig: this._serverConfig,
|
|
188
|
+
debug_displayAudio: this.debug_displayAudio,
|
|
189
|
+
});
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
_toggleRecording() {
|
|
194
|
+
if (!this._serverConfig)
|
|
195
|
+
return;
|
|
196
|
+
if (this._recordingState === 'recording') {
|
|
197
|
+
this.recorderManager.stopRecording();
|
|
198
|
+
}
|
|
199
|
+
else if (this._recordingState === 'stopped') {
|
|
200
|
+
this.recorderManager.startRecording({
|
|
201
|
+
dictationConfig: this.dictationConfig,
|
|
202
|
+
serverConfig: this._serverConfig,
|
|
203
|
+
debug_displayAudio: this.debug_displayAudio,
|
|
204
|
+
});
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
// Handle device change events if needed
|
|
208
|
+
async _onRecordingDevicesChanged(event) {
|
|
209
|
+
const customEvent = event;
|
|
210
|
+
this.setRecordingDevice(customEvent.detail.selectedDevice);
|
|
211
|
+
}
|
|
212
|
+
// Handle language change events
|
|
213
|
+
_onLanguageChanged(event) {
|
|
214
|
+
const customEvent = event;
|
|
215
|
+
const language = customEvent.detail.language;
|
|
216
|
+
if (language) {
|
|
217
|
+
this.setPrimaryLanguage(language);
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
render() {
|
|
221
|
+
if (!this._serverConfig) {
|
|
222
|
+
return html ` <div style="display: none"></div> `;
|
|
223
|
+
}
|
|
224
|
+
const isLoading = this._recordingState === 'initializing' ||
|
|
225
|
+
this._recordingState === 'stopping';
|
|
226
|
+
const isRecording = this._recordingState === 'recording';
|
|
227
|
+
return html `
|
|
228
|
+
<div class="wrapper">
|
|
229
|
+
<button
|
|
230
|
+
@click=${this._toggleRecording}
|
|
231
|
+
class=${isRecording ? 'red' : 'accent'}
|
|
232
|
+
>
|
|
233
|
+
${isLoading
|
|
234
|
+
? html ` <icon-loading-spinner></icon-loading-spinner>`
|
|
235
|
+
: isRecording
|
|
236
|
+
? html ` <icon-recording></icon-recording>`
|
|
237
|
+
: html ` <icon-mic-on></icon-mic-on>`}
|
|
238
|
+
<audio-visualiser
|
|
239
|
+
.level=${this._audioLevel}
|
|
240
|
+
.active=${isRecording}
|
|
241
|
+
></audio-visualiser>
|
|
242
|
+
</button>
|
|
243
|
+
|
|
244
|
+
<settings-menu
|
|
245
|
+
.selectedDevice=${this._selectedDevice}
|
|
246
|
+
.selectedLanguage=${this.dictationConfig.primaryLanguage}
|
|
247
|
+
?settingsDisabled=${this._recordingState !== 'stopped'}
|
|
248
|
+
@recording-devices-changed=${this._onRecordingDevicesChanged}
|
|
249
|
+
@language-changed=${this._onLanguageChanged}
|
|
250
|
+
></settings-menu>
|
|
251
|
+
</div>
|
|
252
|
+
`;
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
CortiDictation.styles = [ButtonStyles, ThemeStyles, ComponentStyles, CalloutStyles];
|
|
256
|
+
__decorate([
|
|
257
|
+
property({ type: Object })
|
|
258
|
+
], CortiDictation.prototype, "dictationConfig", void 0);
|
|
259
|
+
__decorate([
|
|
260
|
+
property({ type: Array })
|
|
261
|
+
], CortiDictation.prototype, "languagesSupported", void 0);
|
|
262
|
+
__decorate([
|
|
263
|
+
property({ type: Boolean })
|
|
264
|
+
], CortiDictation.prototype, "debug_displayAudio", void 0);
|
|
265
|
+
__decorate([
|
|
266
|
+
state()
|
|
267
|
+
], CortiDictation.prototype, "_serverConfig", void 0);
|
|
268
|
+
__decorate([
|
|
269
|
+
state()
|
|
270
|
+
], CortiDictation.prototype, "_audioLevel", void 0);
|
|
271
|
+
__decorate([
|
|
272
|
+
state()
|
|
273
|
+
], CortiDictation.prototype, "_recordingState", void 0);
|
|
274
|
+
__decorate([
|
|
275
|
+
state()
|
|
276
|
+
], CortiDictation.prototype, "_selectedDevice", void 0);
|
|
277
|
+
__decorate([
|
|
278
|
+
state()
|
|
279
|
+
], CortiDictation.prototype, "_devices", void 0);
|
|
280
|
+
export default CortiDictation;
|
|
281
|
+
//# sourceMappingURL=CortiDictation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CortiDictation.js","sourceRoot":"","sources":["../src/CortiDictation.ts"],"names":[],"mappings":"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","sourcesContent":["import { type Corti } from '@corti/sdk';\n\n// corti-dictation.ts\nimport { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { RecorderManager } from './RecorderManager.js';\nimport './components/settings-menu.js';\nimport './components/audio-visualiser.js';\nimport './icons/icons.js';\nimport ThemeStyles from './styles/theme.js';\nimport ButtonStyles from './styles/buttons.js';\nimport ComponentStyles from './styles/ComponentStyles.js';\n\nimport type { RecordingState, ServerConfig } from './types.js';\nimport { DEFAULT_DICTATION_CONFIG, LANGUAGES_SUPPORTED } from './constants.js';\nimport CalloutStyles from './styles/callout.js';\nimport { decodeToken } from './utils.js';\n\nexport class CortiDictation extends LitElement {\n static styles = [ButtonStyles, ThemeStyles, ComponentStyles, CalloutStyles];\n\n @property({ type: Object })\n dictationConfig: Corti.TranscribeConfig = DEFAULT_DICTATION_CONFIG;\n\n @property({ type: Array })\n languagesSupported: Corti.TranscribeSupportedLanguage[] = LANGUAGES_SUPPORTED;\n\n @property({ type: Boolean })\n debug_displayAudio: boolean = false;\n\n @state()\n private _serverConfig: ServerConfig | undefined;\n\n @state()\n private _audioLevel: number = 0;\n\n @state()\n private _recordingState: RecordingState = 'stopped';\n\n @state()\n private _selectedDevice: MediaDeviceInfo | undefined;\n\n @state()\n private _devices: MediaDeviceInfo[] = [];\n\n private recorderManager = new RecorderManager();\n\n async connectedCallback() {\n super.connectedCallback();\n const devices = await this.recorderManager.initialize();\n if (devices.selectedDevice) {\n this._selectedDevice = this.recorderManager.selectedDevice;\n this._devices = this.recorderManager.devices;\n this.dispatchEvent(new CustomEvent('ready'));\n }\n\n // Map event names to any extra handling logic\n const eventHandlers: Record<string, (e: CustomEvent) => void> = {\n 'recording-state-changed': e => {\n this._recordingState = e.detail.state;\n },\n 'devices-changed': () => {\n this._devices = [...this.recorderManager.devices];\n this.requestUpdate();\n },\n 'audio-level-changed': e => {\n this._audioLevel = e.detail.audioLevel;\n this.requestUpdate();\n },\n };\n\n const eventsToRelay = [\n 'recording-state-changed',\n 'recording-devices-changed',\n 'audio-level-changed',\n 'error',\n 'transcript',\n 'command',\n 'ready',\n 'usage',\n 'stream-closed',\n ];\n\n eventsToRelay.forEach(eventName => {\n this.recorderManager.addEventListener(eventName, (e: Event) => {\n const customEvent = e as CustomEvent;\n // Perform any additional handling if defined\n if (eventHandlers[eventName]) {\n eventHandlers[eventName](customEvent);\n }\n // Re-dispatch the event from the component\n this.dispatchEvent(\n new CustomEvent(eventName, {\n detail: customEvent.detail,\n bubbles: eventName !== 'error',\n composed: true,\n }),\n );\n });\n });\n }\n\n public toggleRecording() {\n this._toggleRecording();\n }\n\n /**\n * Sets the access token and returns the server configuration.\n *\n * NOTE: We decode the token here only for backward compatibility in return values.\n * The SDK now handles token parsing internally, so this return value should be\n * reduced in the future to only include necessary fields.\n */\n public setAccessToken(token: string) {\n try {\n const decoded = decodeToken(token);\n this._serverConfig = decoded;\n return decoded;\n } catch (e) {\n throw new Error('Invalid token');\n }\n }\n\n /**\n * Sets the authentication configuration and returns the server configuration.\n *\n * NOTE: We decode tokens here only for backward compatibility in return values.\n * The SDK now handles token parsing internally, so this return value should be\n * reduced in the future to only include necessary fields.\n */\n public async setAuthConfig(\n config: Corti.BearerOptions,\n ): Promise<ServerConfig> {\n try {\n const initialToken =\n 'accessToken' in config\n ? { accessToken: config.accessToken, refreshToken: config.refreshToken }\n : await config.refreshAccessToken();\n\n if (\n !initialToken?.accessToken ||\n typeof initialToken.accessToken !== 'string'\n ) {\n throw new Error('Access token is required and must be a string');\n }\n\n // Decode tokens only for return value compatibility\n // The SDK handles its own token parsing internally\n const decoded = decodeToken(initialToken.accessToken);\n\n if (!decoded) {\n throw new Error('Invalid token format');\n }\n\n this._serverConfig = {\n environment: decoded.environment,\n tenant: decoded.tenant,\n accessToken: initialToken.accessToken,\n refreshToken: config.refreshToken,\n refreshAccessToken: async (refreshToken?: string) => {\n try {\n if (!config.refreshAccessToken) {\n return {\n accessToken: this._serverConfig?.accessToken || 'no_token',\n expiresIn: Infinity,\n refreshToken,\n };\n }\n\n const response = await config.refreshAccessToken(refreshToken);\n\n if (this._serverConfig) {\n this._serverConfig.accessToken = response.accessToken;\n this._serverConfig.refreshToken = response.refreshToken;\n }\n\n return response;\n } catch (e) {\n throw new Error('Error when refreshing access token');\n }\n },\n };\n\n return this._serverConfig;\n } catch (e) {\n throw new Error('Invalid config');\n }\n }\n\n public get selectedDevice(): MediaDeviceInfo | null {\n return this.recorderManager.selectedDevice || null;\n }\n\n public get recordingState(): RecordingState {\n return this._recordingState;\n }\n\n public get devices(): MediaDeviceInfo[] {\n return this._devices;\n }\n\n public async setRecordingDevice(device: MediaDeviceInfo) {\n this.recorderManager.selectedDevice = device;\n this._selectedDevice = device;\n if (!this._serverConfig) return;\n if (this._recordingState === 'recording') {\n await this.recorderManager.stopRecording();\n await this.recorderManager.startRecording({\n dictationConfig: this.dictationConfig,\n serverConfig: this._serverConfig,\n });\n }\n }\n\n public setPrimaryLanguage(language: string) {\n if (LANGUAGES_SUPPORTED.includes(language)) {\n this.dictationConfig = {\n ...this.dictationConfig,\n primaryLanguage: language,\n };\n\n // If recording is in progress, restart to apply the language change\n if (this._serverConfig && this._recordingState === 'recording') {\n this.recorderManager.stopRecording();\n this.recorderManager.startRecording({\n dictationConfig: this.dictationConfig,\n serverConfig: this._serverConfig,\n debug_displayAudio: this.debug_displayAudio,\n });\n }\n }\n }\n\n _toggleRecording() {\n if (!this._serverConfig) return;\n if (this._recordingState === 'recording') {\n this.recorderManager.stopRecording();\n } else if (this._recordingState === 'stopped') {\n this.recorderManager.startRecording({\n dictationConfig: this.dictationConfig,\n serverConfig: this._serverConfig,\n debug_displayAudio: this.debug_displayAudio,\n });\n }\n }\n\n // Handle device change events if needed\n async _onRecordingDevicesChanged(event: Event) {\n const customEvent = event as CustomEvent;\n this.setRecordingDevice(customEvent.detail.selectedDevice);\n }\n\n // Handle language change events\n _onLanguageChanged(event: Event) {\n const customEvent = event as CustomEvent;\n const language = customEvent.detail.language;\n if (language) {\n this.setPrimaryLanguage(language);\n }\n }\n\n render() {\n if (!this._serverConfig) {\n return html` <div style=\"display: none\"></div> `;\n }\n\n const isLoading =\n this._recordingState === 'initializing' ||\n this._recordingState === 'stopping';\n const isRecording = this._recordingState === 'recording';\n return html`\n <div class=\"wrapper\">\n <button\n @click=${this._toggleRecording}\n class=${isRecording ? 'red' : 'accent'}\n >\n ${isLoading\n ? html` <icon-loading-spinner></icon-loading-spinner>`\n : isRecording\n ? html` <icon-recording></icon-recording>`\n : html` <icon-mic-on></icon-mic-on>`}\n <audio-visualiser\n .level=${this._audioLevel}\n .active=${isRecording}\n ></audio-visualiser>\n </button>\n\n <settings-menu\n .selectedDevice=${this._selectedDevice}\n .selectedLanguage=${this.dictationConfig.primaryLanguage}\n ?settingsDisabled=${this._recordingState !== 'stopped'}\n @recording-devices-changed=${this._onRecordingDevicesChanged}\n @language-changed=${this._onLanguageChanged}\n ></settings-menu>\n </div>\n `;\n }\n}\n\nexport default CortiDictation;\n"]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Corti } from '@corti/sdk';
|
|
2
|
+
import type { ServerConfig } from './types.js';
|
|
3
|
+
export declare class DictationService extends EventTarget {
|
|
4
|
+
private mediaRecorder;
|
|
5
|
+
private webSocket;
|
|
6
|
+
private serverConfig;
|
|
7
|
+
private dictationConfig;
|
|
8
|
+
private cortiClient;
|
|
9
|
+
constructor(mediaStream: MediaStream, { dictationConfig, serverConfig, }: {
|
|
10
|
+
dictationConfig: Corti.TranscribeConfig;
|
|
11
|
+
serverConfig: ServerConfig;
|
|
12
|
+
});
|
|
13
|
+
private dispatchCustomEvent;
|
|
14
|
+
startRecording(): Promise<void>;
|
|
15
|
+
stopRecording(): Promise<void>;
|
|
16
|
+
}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { CortiClient } from '@corti/sdk';
|
|
2
|
+
import { getErrorMessage } from './utils.js';
|
|
3
|
+
export class DictationService extends EventTarget {
|
|
4
|
+
constructor(mediaStream, { dictationConfig, serverConfig, }) {
|
|
5
|
+
super();
|
|
6
|
+
this.mediaRecorder = new MediaRecorder(mediaStream);
|
|
7
|
+
this.serverConfig = serverConfig;
|
|
8
|
+
this.dictationConfig = dictationConfig;
|
|
9
|
+
// We're forced to remove from expiresIn/refreshExpiresIn here,
|
|
10
|
+
// because we recreate connection every time we connect
|
|
11
|
+
// => it makes expiresIn (we receive from API) out of date
|
|
12
|
+
const { expiresIn, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
13
|
+
refreshExpiresIn, // eslint-disable-line @typescript-eslint/no-unused-vars
|
|
14
|
+
...authConfig } = serverConfig;
|
|
15
|
+
this.cortiClient = new CortiClient({
|
|
16
|
+
auth: authConfig,
|
|
17
|
+
});
|
|
18
|
+
this.mediaRecorder.ondataavailable = event => {
|
|
19
|
+
if (this.webSocket?.readyState === WebSocket.OPEN) {
|
|
20
|
+
this.webSocket.sendAudio(event.data);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
dispatchCustomEvent(eventName, detail) {
|
|
25
|
+
this.dispatchEvent(new CustomEvent(eventName, {
|
|
26
|
+
detail,
|
|
27
|
+
bubbles: true,
|
|
28
|
+
composed: true,
|
|
29
|
+
}));
|
|
30
|
+
}
|
|
31
|
+
async startRecording() {
|
|
32
|
+
if (!this.serverConfig) {
|
|
33
|
+
this.dispatchEvent(new CustomEvent('error', {
|
|
34
|
+
detail: 'Invalid token',
|
|
35
|
+
bubbles: true,
|
|
36
|
+
composed: true,
|
|
37
|
+
}));
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
this.webSocket = await this.cortiClient.transcribe.connect({
|
|
41
|
+
configuration: this.dictationConfig,
|
|
42
|
+
});
|
|
43
|
+
this.webSocket.on('message', message => {
|
|
44
|
+
switch (message.type) {
|
|
45
|
+
case 'CONFIG_ACCEPTED':
|
|
46
|
+
this.mediaRecorder.start(250);
|
|
47
|
+
break;
|
|
48
|
+
case 'transcript':
|
|
49
|
+
this.dispatchCustomEvent('transcript', message);
|
|
50
|
+
break;
|
|
51
|
+
case 'command':
|
|
52
|
+
this.dispatchCustomEvent('command', message);
|
|
53
|
+
break;
|
|
54
|
+
case 'usage':
|
|
55
|
+
this.dispatchCustomEvent('usage', message);
|
|
56
|
+
break;
|
|
57
|
+
default:
|
|
58
|
+
console.warn(`Unhandled message type: ${message.type}`);
|
|
59
|
+
break;
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
this.webSocket.on('error', event => {
|
|
63
|
+
this.stopRecording();
|
|
64
|
+
this.dispatchCustomEvent('error', getErrorMessage(event));
|
|
65
|
+
});
|
|
66
|
+
this.webSocket.on('close', event => {
|
|
67
|
+
this.dispatchCustomEvent('stream-closed', event);
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
async stopRecording() {
|
|
71
|
+
this.mediaRecorder?.stop();
|
|
72
|
+
if (this.webSocket.readyState === WebSocket.OPEN) {
|
|
73
|
+
this.webSocket.sendEnd({
|
|
74
|
+
type: 'end',
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
const timeout = setTimeout(() => {
|
|
78
|
+
if (this.webSocket?.readyState === WebSocket.OPEN) {
|
|
79
|
+
this.webSocket.close();
|
|
80
|
+
}
|
|
81
|
+
}, 10000);
|
|
82
|
+
this.webSocket.on('close', (event) => {
|
|
83
|
+
clearTimeout(timeout);
|
|
84
|
+
this.dispatchCustomEvent('stream-closed', event);
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
//# sourceMappingURL=DictationService.js.map
|