vibrium-speak-sdk 1.0.0
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/README.md +166 -0
- package/dist/index.css +1092 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.mts +98 -0
- package/dist/index.d.ts +98 -0
- package/dist/index.js +1705 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +1709 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +48 -0
package/README.md
ADDED
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
# Vibrium Voice LiveKit SDK
|
|
2
|
+
|
|
3
|
+
A dead simple React SDK for adding voice capabilities to your website via LiveKit.
|
|
4
|
+
|
|
5
|
+
**🎯 Goal**: Drop-in mic button → Click → Connects to Lambda → Gets LiveKit token → Voice conversation starts
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
✨ **Super Simple Integration** - Just one component: `<FloatingMic />`
|
|
10
|
+
🎤 **Floating Mic Button** - Appears at bottom-right of screen
|
|
11
|
+
🔊 **Automatic Audio Handling** - WebRTC audio to LiveKit server
|
|
12
|
+
💬 **Message History** - Shows conversation in side panel
|
|
13
|
+
🔇 **Mic/Speaker Controls** - Mute individual tracks
|
|
14
|
+
👥 **Participant List** - See who's connected
|
|
15
|
+
🎯 **TypeScript Support** - Full type definitions
|
|
16
|
+
âš¡ **Token Caching** - 1-hour cache to avoid Lambda calls
|
|
17
|
+
|
|
18
|
+
## Quick Start
|
|
19
|
+
|
|
20
|
+
### 1. Install
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install vibrium-voice-sdk
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### 2. Add to Your App
|
|
27
|
+
|
|
28
|
+
```jsx
|
|
29
|
+
import { FloatingMic } from 'vibrium-voice-sdk';
|
|
30
|
+
|
|
31
|
+
export default function App() {
|
|
32
|
+
return (
|
|
33
|
+
<>
|
|
34
|
+
<h1>Welcome to My Site</h1>
|
|
35
|
+
{/* That's it! Mic appears at bottom-right */}
|
|
36
|
+
<FloatingMic lambdaUrl="https://your-lambda.com/session" />
|
|
37
|
+
</>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### 3. Create Lambda Endpoint
|
|
43
|
+
|
|
44
|
+
Your Lambda should return:
|
|
45
|
+
|
|
46
|
+
```json
|
|
47
|
+
{
|
|
48
|
+
"token": "eyJhbGc...",
|
|
49
|
+
"url": "wss://livekit-server.com",
|
|
50
|
+
"room": "room-name",
|
|
51
|
+
"displayName": "User Name"
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
**Example Lambda (Node.js):**
|
|
56
|
+
|
|
57
|
+
```javascript
|
|
58
|
+
import { AccessToken } from 'livekit-server-sdk';
|
|
59
|
+
|
|
60
|
+
export const handler = async (event) => {
|
|
61
|
+
const token = new AccessToken(
|
|
62
|
+
process.env.LIVEKIT_API_KEY,
|
|
63
|
+
process.env.LIVEKIT_API_SECRET
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
token.addGrant({
|
|
67
|
+
room: 'my-room',
|
|
68
|
+
roomJoin: true,
|
|
69
|
+
canPublish: true,
|
|
70
|
+
canSubscribe: true,
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
return {
|
|
74
|
+
statusCode: 200,
|
|
75
|
+
body: JSON.stringify({
|
|
76
|
+
token: token.toJwt(),
|
|
77
|
+
url: process.env.LIVEKIT_URL,
|
|
78
|
+
room: 'my-room',
|
|
79
|
+
displayName: 'User',
|
|
80
|
+
}),
|
|
81
|
+
};
|
|
82
|
+
};
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## Documentation
|
|
86
|
+
|
|
87
|
+
- **[Integration Guide](./INTEGRATION_GUIDE.md)** - Complete integration docs
|
|
88
|
+
- **[Examples](./EXAMPLES.md)** - Code examples for different use cases
|
|
89
|
+
- **[API Reference](./INTEGRATION_GUIDE.md#api-reference)** - All hooks and types
|
|
90
|
+
|
|
91
|
+
## Usage Examples
|
|
92
|
+
|
|
93
|
+
### Simple (Recommended)
|
|
94
|
+
```jsx
|
|
95
|
+
<FloatingMic lambdaUrl="https://your-lambda.com/session" />
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### With Configuration
|
|
99
|
+
```jsx
|
|
100
|
+
<FloatingMic
|
|
101
|
+
lambdaUrl="https://api.example.com/session"
|
|
102
|
+
lambdaPayload={{ userId: '123', context: 'support' }}
|
|
103
|
+
textEnabled={true}
|
|
104
|
+
displayName="John Doe"
|
|
105
|
+
/>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### Advanced with Hook
|
|
109
|
+
```jsx
|
|
110
|
+
import { useLiveKitRoom } from 'vibrium-voice-sdk';
|
|
111
|
+
|
|
112
|
+
function MyComponent() {
|
|
113
|
+
const livekit = useLiveKitRoom();
|
|
114
|
+
|
|
115
|
+
return (
|
|
116
|
+
<div>
|
|
117
|
+
<button onClick={() => livekit.connect(config)}>
|
|
118
|
+
Connect
|
|
119
|
+
</button>
|
|
120
|
+
<p>{livekit.state}</p>
|
|
121
|
+
{livekit.messages.map(m => <div key={m}>{m.text}</div>)}
|
|
122
|
+
</div>
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
## Props
|
|
128
|
+
|
|
129
|
+
### FloatingMic
|
|
130
|
+
|
|
131
|
+
| Prop | Type | Description |
|
|
132
|
+
|------|------|-------------|
|
|
133
|
+
| `lambdaUrl` | string | Your Lambda endpoint (required) |
|
|
134
|
+
| `lambdaPayload` | object | Extra data to send to Lambda |
|
|
135
|
+
| `displayName` | string | Display name for participant |
|
|
136
|
+
| `textEnabled` | boolean | Show text input field |
|
|
137
|
+
|
|
138
|
+
## Browser Support
|
|
139
|
+
|
|
140
|
+
- Chrome/Edge 90+
|
|
141
|
+
- Firefox 88+
|
|
142
|
+
- Safari 14+
|
|
143
|
+
|
|
144
|
+
## Development
|
|
145
|
+
|
|
146
|
+
### Setup
|
|
147
|
+
|
|
148
|
+
```bash
|
|
149
|
+
npm install
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### Build
|
|
153
|
+
|
|
154
|
+
```bash
|
|
155
|
+
npm run build
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
### Pack for NPM
|
|
159
|
+
|
|
160
|
+
```bash
|
|
161
|
+
npm pack
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
## License
|
|
165
|
+
|
|
166
|
+
MIT
|