CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-mux--mux-node

Official TypeScript library providing comprehensive client access to Mux's video infrastructure API including asset management, live streaming, analytics, and webhook handling

Overview
Eval results
Files

web-inputs.mddocs/

Web Inputs

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.

Capabilities

Web Input Creation

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

/**
 * Create a new Web Input
 * @param body - Web input creation parameters
 * @returns Promise resolving to the created web input
 */
create(
  body: WebInputCreateParams,
  options?: Core.RequestOptions
): Core.APIPromise<WebInputCreateResponse>;

interface WebInputCreateParams {
  /** Live Stream ID to broadcast this Web Input to */
  live_stream_id: string;
  /** URL for the Web Input to load */
  url: string;
  /** Optional unique identifier for the Web Input */
  id?: string;
  /** Auto-launch and start streaming immediately after creation */
  auto_launch?: boolean;
  /** Creation timestamp (Unix seconds since epoch) */
  created_at?: string;
  /** Optional metadata (max 255 characters) */
  passthrough?: string;
  /** Browser viewport resolution */
  resolution?: '1920x1080' | '1280x720' | '1080x1920' | '720x1280' | '1080x1080' | '720x720';
  /** Initial status */
  status?: 'idle' | 'launching' | 'streaming';
  /** Auto-shutdown timeout in seconds */
  timeout?: number;
}

Usage Example:

import Mux from "@mux/mux-node";

const mux = new Mux({
  tokenId: process.env.MUX_TOKEN_ID,
  tokenSecret: process.env.MUX_TOKEN_SECRET,
});

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

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

Web Input Retrieval

Retrieve details of existing Web Input instances.

/**
 * Retrieve a single Web Input's information
 * @param webInputId - Unique Web Input identifier
 * @returns Promise resolving to the web input details
 */
retrieve(
  webInputId: string,
  options?: Core.RequestOptions
): Core.APIPromise<WebInputRetrieveResponse>;

Usage Example:

const webInput = await mux.video.webInputs.retrieve("abcd1234");

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

Web Input Listing

List and paginate through all Web Input instances.

/**
 * List all Web Inputs with pagination
 * @param query - Optional pagination parameters
 * @returns PagePromise for iterating through web inputs
 */
list(
  query?: WebInputListParams,
  options?: Core.RequestOptions
): Core.PagePromise<WebInputListResponsesBasePage, WebInputListResponse>;

interface WebInputListParams extends BasePageParams {
  /** Page number for pagination */
  page?: number;
  /** Number of items per page */
  limit?: number;
}

Usage Example:

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

// Manual pagination
const page = await mux.video.webInputs.list({
  page: 1,
  limit: 10
});

Web Input Launch

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

/**
 * Launch browser instance, load URL, and start streaming
 * @param webInputId - Web Input to launch
 * @returns Promise resolving when launch completes
 */
launch(
  webInputId: string,
  options?: Core.RequestOptions
): Core.APIPromise<WebInputLaunchResponse>;

Usage Example:

await mux.video.webInputs.launch("abcd1234");
console.log("Web Input launched and streaming started");

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

Web Input Page Reload

Reload the page content while maintaining the streaming session.

/**
 * Reload the page that a Web Input is displaying
 * Note: Page reload will be visible in the stream
 * @param webInputId - Web Input to reload
 * @returns Promise resolving when reload completes
 */
reload(
  webInputId: string,
  options?: Core.RequestOptions
): Core.APIPromise<WebInputReloadResponse>;

Usage Example:

// Refresh the page content (useful for dashboard updates)
await mux.video.webInputs.reload("abcd1234");
console.log("Page reloaded - reload animation will be visible in stream");

Web Input URL Updates

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

/**
 * Update the URL for a Web Input
 * Note: Can only be called when Web Input is idle
 * @param webInputId - Web Input to update
 * @param body - URL update parameters
 * @returns Promise resolving to updated web input
 */
updateURL(
  webInputId: string,
  body: WebInputUpdateURLParams,
  options?: Core.RequestOptions
): Core.APIPromise<WebInputUpdateURLResponse>;

interface WebInputUpdateURLParams {
  /** New URL for the Web Input to load */
  url: string;
}

Usage Example:

// Ensure web input is shut down first
await mux.video.webInputs.shutdown("abcd1234");

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

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

Web Input Shutdown

Stop streaming and shut down the browser instance.

/**
 * End streaming and shut down Web Input browser instance
 * @param webInputId - Web Input to shutdown
 * @returns Promise resolving when shutdown completes
 */
shutdown(
  webInputId: string,
  options?: Core.RequestOptions
): Core.APIPromise<WebInputShutdownResponse>;

Usage Example:

await mux.video.webInputs.shutdown("abcd1234");
console.log("Web Input streaming ended and browser shut down");

Web Input Deletion

Delete Web Input instances and all associated data.

/**
 * Delete a Web Input and all its data
 * @param webInputId - Web Input to delete
 * @returns Promise that resolves when deletion completes
 */
delete(
  webInputId: string,
  options?: Core.RequestOptions
): Core.APIPromise<void>;

Usage Example:

await mux.video.webInputs.delete("abcd1234");
console.log("Web Input deleted successfully");

Types

interface WebInputCreateResponse {
  /** Unique identifier for the Web Input */
  id: string;
  /** Auto-launch setting */
  auto_launch: boolean;
  /** Creation timestamp (Unix seconds since epoch) */
  created_at: string;
  /** Associated Live Stream ID */
  live_stream_id: string;
  /** Browser viewport resolution */
  resolution: '1920x1080' | '1280x720' | '1080x1920' | '720x1280' | '1080x1080' | '720x720';
  /** Current status */
  status: 'idle' | 'launching' | 'streaming';
  /** Current URL being displayed */
  url: string;
  /** Optional metadata (max 255 characters) */
  passthrough?: string;
  /** Auto-shutdown timeout in seconds */
  timeout?: number;
}

interface WebInputRetrieveResponse {
  /** Unique identifier for the Web Input */
  id: string;
  /** Auto-launch setting */
  auto_launch: boolean;
  /** Creation timestamp (Unix seconds since epoch) */
  created_at: string;
  /** Associated Live Stream ID */
  live_stream_id: string;
  /** Browser viewport resolution */
  resolution: '1920x1080' | '1280x720' | '1080x1920' | '720x1280' | '1080x1080' | '720x720';
  /** Current status */
  status: 'idle' | 'launching' | 'streaming';
  /** Current URL being displayed */
  url: string;
  /** Optional metadata (max 255 characters) */
  passthrough?: string;
  /** Auto-shutdown timeout in seconds */
  timeout?: number;
}

interface WebInputListResponse {
  /** Unique identifier for the Web Input */
  id: string;
  /** Auto-launch setting */
  auto_launch: boolean;
  /** Creation timestamp (Unix seconds since epoch) */
  created_at: string;
  /** Associated Live Stream ID */
  live_stream_id: string;
  /** Browser viewport resolution */
  resolution: '1920x1080' | '1280x720' | '1080x1920' | '720x1280' | '1080x1080' | '720x720';
  /** Current status */
  status: 'idle' | 'launching' | 'streaming';
  /** Current URL being displayed */
  url: string;
  /** Optional metadata (max 255 characters) */
  passthrough?: string;
  /** Auto-shutdown timeout in seconds */
  timeout?: number;
}

interface WebInputUpdateURLResponse {
  /** Unique identifier for the Web Input */
  id: string;
  /** Auto-launch setting */
  auto_launch: boolean;
  /** Creation timestamp (Unix seconds since epoch) */
  created_at: string;
  /** Associated Live Stream ID */
  live_stream_id: string;
  /** Browser viewport resolution */
  resolution: '1920x1080' | '1280x720' | '1080x1920' | '720x1280' | '1080x1080' | '720x720';
  /** Current status */
  status: 'idle' | 'launching' | 'streaming';
  /** Current URL being displayed */
  url: string;
  /** Optional metadata (max 255 characters) */
  passthrough?: string;
  /** Auto-shutdown timeout in seconds */
  timeout?: number;
}

/** Response types for control operations */
type WebInputLaunchResponse = unknown;
type WebInputReloadResponse = unknown;
type WebInputShutdownResponse = unknown;

/** Pagination wrapper for web input listing */
class WebInputListResponsesBasePage extends BasePage<WebInputListResponse> {}

Resolution Options

Web Inputs support various viewport resolutions for different streaming needs:

  • 1920x1080: Full HD landscape (default)
  • 1280x720: HD landscape
  • 1080x1920: Full HD portrait (mobile)
  • 720x1280: HD portrait (mobile)
  • 1080x1080: Square format
  • 720x720: Small square format

Use Cases

Dashboard Streaming

const dashboardInput = await mux.video.webInputs.create({
  live_stream_id: liveStream.id,
  url: "https://analytics.example.com/dashboard",
  resolution: "1920x1080",
  auto_launch: true
});

Interactive Web App Capture

const appInput = await mux.video.webInputs.create({
  live_stream_id: liveStream.id,
  url: "https://app.example.com/presentation",
  resolution: "1920x1080",
  timeout: 7200 // 2 hours
});

Browser-based Presentations

const presentationInput = await mux.video.webInputs.create({
  live_stream_id: liveStream.id,
  url: "https://slides.example.com/deck/123",
  resolution: "1920x1080"
});

// Launch when ready to present
await mux.video.webInputs.launch(presentationInput.id);

Best Practices

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

Install with Tessl CLI

npx tessl i tessl/npm-mux--mux-node

docs

analytics-metrics.md

client-setup.md

data.md

delivery-usage.md

error-handling.md

index.md

jwt-signing.md

jwt.md

live-streaming.md

playback-control.md

system-operations.md

system.md

transcription-vocabularies.md

upload-utilities.md

video-assets.md

video-playback.md

video-uploads.md

video.md

web-inputs.md

webhooks.md

tile.json