0
# Web Inputs
1

2
Browser-based video recording and live streaming management. Web Inputs capture web pages, browser applications, or interactive content and stream them to live streams with full browser rendering capabilities.
3

4
## Capabilities
5

6
### Web Input Creation
7

8
Create Web Input instances that render web pages in a browser for live streaming.
9

10
```typescript { .api }
11
/**
12
 * Create a new Web Input
13
 * @param body - Web input creation parameters
14
 * @returns Promise resolving to the created web input
15
 */
16
create(
17
  body: WebInputCreateParams,
18
  options?: Core.RequestOptions
19
): Core.APIPromise<WebInputCreateResponse>;
20

21
interface WebInputCreateParams {
22
  /** Live Stream ID to broadcast this Web Input to */
23
  live_stream_id: string;
24
  /** URL for the Web Input to load */
25
  url: string;
26
  /** Optional unique identifier for the Web Input */
27
  id?: string;
28
  /** Auto-launch and start streaming immediately after creation */
29
  auto_launch?: boolean;
30
  /** Creation timestamp (Unix seconds since epoch) */
31
  created_at?: string;
32
  /** Optional metadata (max 255 characters) */
33
  passthrough?: string;
34
  /** Browser viewport resolution */
35
  resolution?: '1920x1080' | '1280x720' | '1080x1920' | '720x1280' | '1080x1080' | '720x720';
36
  /** Initial status */
37
  status?: 'idle' | 'launching' | 'streaming';
38
  /** Auto-shutdown timeout in seconds */
39
  timeout?: number;
40
}
41
```
42

43
**Usage Example:**
44

45
```typescript
46
import Mux from "@mux/mux-node";
47

48
const mux = new Mux({
49
  tokenId: process.env.MUX_TOKEN_ID,
50
  tokenSecret: process.env.MUX_TOKEN_SECRET,
51
});
52

53
// Create a web input for a dashboard
54
const webInput = await mux.video.webInputs.create({
55
  live_stream_id: "ZEBrNTpHC02iUah025KM3te6ylM7W4S4silsrFtUkn3Ag",
56
  url: "https://example.com/dashboard.html",
57
  resolution: "1920x1080",
58
  auto_launch: true,
59
  timeout: 3600 // 1 hour
60
});
61

62
console.log(`Created Web Input: ${webInput.id}`);
63
```
64

65
### Web Input Retrieval
66

67
Retrieve details of existing Web Input instances.
68

69
```typescript { .api }
70
/**
71
 * Retrieve a single Web Input's information
72
 * @param webInputId - Unique Web Input identifier
73
 * @returns Promise resolving to the web input details
74
 */
75
retrieve(
76
  webInputId: string,
77
  options?: Core.RequestOptions
78
): Core.APIPromise<WebInputRetrieveResponse>;
79
```
80

81
**Usage Example:**
82

83
```typescript
84
const webInput = await mux.video.webInputs.retrieve("abcd1234");
85

86
console.log(`Web Input status: ${webInput.status}`);
87
console.log(`Streaming to: ${webInput.live_stream_id}`);
88
console.log(`Current URL: ${webInput.url}`);
89
```
90

91
### Web Input Listing
92

93
List and paginate through all Web Input instances.
94

95
```typescript { .api }
96
/**
97
 * List all Web Inputs with pagination
98
 * @param query - Optional pagination parameters
99
 * @returns PagePromise for iterating through web inputs
100
 */
101
list(
102
  query?: WebInputListParams,
103
  options?: Core.RequestOptions
104
): Core.PagePromise<WebInputListResponsesBasePage, WebInputListResponse>;
105

106
interface WebInputListParams extends BasePageParams {
107
  /** Page number for pagination */
108
  page?: number;
109
  /** Number of items per page */
110
  limit?: number;
111
}
112
```
113

114
**Usage Example:**
115

116
```typescript
117
// Auto-pagination through all web inputs
118
for await (const webInput of mux.video.webInputs.list()) {
119
  console.log(`Web Input ${webInput.id}: ${webInput.status} - ${webInput.url}`);
120
}
121

122
// Manual pagination
123
const page = await mux.video.webInputs.list({
124
  page: 1,
125
  limit: 10
126
});
127
```
128

129
### Web Input Launch
130

131
Launch the browser instance and start streaming to the associated live stream.
132

133
```typescript { .api }
134
/**
135
 * Launch browser instance, load URL, and start streaming
136
 * @param webInputId - Web Input to launch
137
 * @returns Promise resolving when launch completes
138
 */
139
launch(
140
  webInputId: string,
141
  options?: Core.RequestOptions
142
): Core.APIPromise<WebInputLaunchResponse>;
143
```
144

145
**Usage Example:**
146

147
```typescript
148
await mux.video.webInputs.launch("abcd1234");
149
console.log("Web Input launched and streaming started");
150

151
// Monitor status changes
152
const webInput = await mux.video.webInputs.retrieve("abcd1234");
153
console.log(`Current status: ${webInput.status}`); // Should be 'launching' or 'streaming'
154
```
155

156
### Web Input Page Reload
157

158
Reload the page content while maintaining the streaming session.
159

160
```typescript { .api }
161
/**
162
 * Reload the page that a Web Input is displaying
163
 * Note: Page reload will be visible in the stream
164
 * @param webInputId - Web Input to reload
165
 * @returns Promise resolving when reload completes
166
 */
167
reload(
168
  webInputId: string,
169
  options?: Core.RequestOptions
170
): Core.APIPromise<WebInputReloadResponse>;
171
```
172

173
**Usage Example:**
174

175
```typescript
176
// Refresh the page content (useful for dashboard updates)
177
await mux.video.webInputs.reload("abcd1234");
178
console.log("Page reloaded - reload animation will be visible in stream");
179
```
180

181
### Web Input URL Updates
182

183
Change the URL that the Web Input displays (only when idle).
184

185
```typescript { .api }
186
/**
187
 * Update the URL for a Web Input
188
 * Note: Can only be called when Web Input is idle
189
 * @param webInputId - Web Input to update
190
 * @param body - URL update parameters
191
 * @returns Promise resolving to updated web input
192
 */
193
updateURL(
194
  webInputId: string,
195
  body: WebInputUpdateURLParams,
196
  options?: Core.RequestOptions
197
): Core.APIPromise<WebInputUpdateURLResponse>;
198

199
interface WebInputUpdateURLParams {
200
  /** New URL for the Web Input to load */
201
  url: string;
202
}
203
```
204

205
**Usage Example:**
206

207
```typescript
208
// Ensure web input is shut down first
209
await mux.video.webInputs.shutdown("abcd1234");
210

211
// Wait for idle status
212
let webInput = await mux.video.webInputs.retrieve("abcd1234");
213
while (webInput.status !== 'idle') {
214
  await new Promise(resolve => setTimeout(resolve, 1000));
215
  webInput = await mux.video.webInputs.retrieve("abcd1234");
216
}
217

218
// Update URL
219
const updatedWebInput = await mux.video.webInputs.updateURL("abcd1234", {
220
  url: "https://example.com/new-dashboard.html"
221
});
222
```
223

224
### Web Input Shutdown
225

226
Stop streaming and shut down the browser instance.
227

228
```typescript { .api }
229
/**
230
 * End streaming and shut down Web Input browser instance
231
 * @param webInputId - Web Input to shutdown
232
 * @returns Promise resolving when shutdown completes
233
 */
234
shutdown(
235
  webInputId: string,
236
  options?: Core.RequestOptions
237
): Core.APIPromise<WebInputShutdownResponse>;
238
```
239

240
**Usage Example:**
241

242
```typescript
243
await mux.video.webInputs.shutdown("abcd1234");
244
console.log("Web Input streaming ended and browser shut down");
245
```
246

247
### Web Input Deletion
248

249
Delete Web Input instances and all associated data.
250

251
```typescript { .api }
252
/**
253
 * Delete a Web Input and all its data
254
 * @param webInputId - Web Input to delete
255
 * @returns Promise that resolves when deletion completes
256
 */
257
delete(
258
  webInputId: string,
259
  options?: Core.RequestOptions
260
): Core.APIPromise<void>;
261
```
262

263
**Usage Example:**
264

265
```typescript
266
await mux.video.webInputs.delete("abcd1234");
267
console.log("Web Input deleted successfully");
268
```
269

270
## Types
271

272
```typescript { .api }
273
interface WebInputCreateResponse {
274
  /** Unique identifier for the Web Input */
275
  id: string;
276
  /** Auto-launch setting */
277
  auto_launch: boolean;
278
  /** Creation timestamp (Unix seconds since epoch) */
279
  created_at: string;
280
  /** Associated Live Stream ID */
281
  live_stream_id: string;
282
  /** Browser viewport resolution */
283
  resolution: '1920x1080' | '1280x720' | '1080x1920' | '720x1280' | '1080x1080' | '720x720';
284
  /** Current status */
285
  status: 'idle' | 'launching' | 'streaming';
286
  /** Current URL being displayed */
287
  url: string;
288
  /** Optional metadata (max 255 characters) */
289
  passthrough?: string;
290
  /** Auto-shutdown timeout in seconds */
291
  timeout?: number;
292
}
293

294
interface WebInputRetrieveResponse {
295
  /** Unique identifier for the Web Input */
296
  id: string;
297
  /** Auto-launch setting */
298
  auto_launch: boolean;
299
  /** Creation timestamp (Unix seconds since epoch) */
300
  created_at: string;
301
  /** Associated Live Stream ID */
302
  live_stream_id: string;
303
  /** Browser viewport resolution */
304
  resolution: '1920x1080' | '1280x720' | '1080x1920' | '720x1280' | '1080x1080' | '720x720';
305
  /** Current status */
306
  status: 'idle' | 'launching' | 'streaming';
307
  /** Current URL being displayed */
308
  url: string;
309
  /** Optional metadata (max 255 characters) */
310
  passthrough?: string;
311
  /** Auto-shutdown timeout in seconds */
312
  timeout?: number;
313
}
314

315
interface WebInputListResponse {
316
  /** Unique identifier for the Web Input */
317
  id: string;
318
  /** Auto-launch setting */
319
  auto_launch: boolean;
320
  /** Creation timestamp (Unix seconds since epoch) */
321
  created_at: string;
322
  /** Associated Live Stream ID */
323
  live_stream_id: string;
324
  /** Browser viewport resolution */
325
  resolution: '1920x1080' | '1280x720' | '1080x1920' | '720x1280' | '1080x1080' | '720x720';
326
  /** Current status */
327
  status: 'idle' | 'launching' | 'streaming';
328
  /** Current URL being displayed */
329
  url: string;
330
  /** Optional metadata (max 255 characters) */
331
  passthrough?: string;
332
  /** Auto-shutdown timeout in seconds */
333
  timeout?: number;
334
}
335

336
interface WebInputUpdateURLResponse {
337
  /** Unique identifier for the Web Input */
338
  id: string;
339
  /** Auto-launch setting */
340
  auto_launch: boolean;
341
  /** Creation timestamp (Unix seconds since epoch) */
342
  created_at: string;
343
  /** Associated Live Stream ID */
344
  live_stream_id: string;
345
  /** Browser viewport resolution */
346
  resolution: '1920x1080' | '1280x720' | '1080x1920' | '720x1280' | '1080x1080' | '720x720';
347
  /** Current status */
348
  status: 'idle' | 'launching' | 'streaming';
349
  /** Current URL being displayed */
350
  url: string;
351
  /** Optional metadata (max 255 characters) */
352
  passthrough?: string;
353
  /** Auto-shutdown timeout in seconds */
354
  timeout?: number;
355
}
356

357
/** Response types for control operations */
358
type WebInputLaunchResponse = unknown;
359
type WebInputReloadResponse = unknown;
360
type WebInputShutdownResponse = unknown;
361

362
/** Pagination wrapper for web input listing */
363
class WebInputListResponsesBasePage extends BasePage<WebInputListResponse> {}
364
```
365

366
## Resolution Options
367

368
Web Inputs support various viewport resolutions for different streaming needs:
369

370
- **1920x1080**: Full HD landscape (default)
371
- **1280x720**: HD landscape
372
- **1080x1920**: Full HD portrait (mobile)
373
- **720x1280**: HD portrait (mobile)
374
- **1080x1080**: Square format
375
- **720x720**: Small square format
376

377
## Use Cases
378

379
### Dashboard Streaming
380
```typescript
381
const dashboardInput = await mux.video.webInputs.create({
382
  live_stream_id: liveStream.id,
383
  url: "https://analytics.example.com/dashboard",
384
  resolution: "1920x1080",
385
  auto_launch: true
386
});
387
```
388

389
### Interactive Web App Capture
390
```typescript
391
const appInput = await mux.video.webInputs.create({
392
  live_stream_id: liveStream.id,
393
  url: "https://app.example.com/presentation",
394
  resolution: "1920x1080",
395
  timeout: 7200 // 2 hours
396
});
397
```
398

399
### Browser-based Presentations
400
```typescript
401
const presentationInput = await mux.video.webInputs.create({
402
  live_stream_id: liveStream.id,
403
  url: "https://slides.example.com/deck/123",
404
  resolution: "1920x1080"
405
});
406

407
// Launch when ready to present
408
await mux.video.webInputs.launch(presentationInput.id);
409
```
410

411
## Best Practices
412

413
- **Status Monitoring**: Always check status before performing operations
414
- **URL Updates**: Only update URLs when Web Input is in 'idle' status
415
- **Timeout Management**: Set appropriate timeout values to prevent runaway instances
416
- **Resource Cleanup**: Always shutdown and delete Web Inputs when finished
417
- **Resolution Selection**: Choose resolution based on target audience and streaming requirements