GWP Multiplexing Demo - Multiple Cameras Grid

Connection Settings

Media Gateway Address

Username

SDK Certificate

Password

Camera GUIDs

Camera 1 GUID

Camera 2 GUID

Camera 3 GUID

Camera 4 GUID

Grid Size:

Note: Leave camera GUIDs empty to skip those tiles. The demo will only start players for cameras with valid GUIDs.

📊 Statistics

WebSocket Connections

Active Players

Streaming Cameras

GWP Version

ℹ️ How Multiplexing Works

Single WebSocket: All players share one WebSocket connection to the Media Gateway
Shared Service: Created using gwp.buildMediaGatewayService()
Individual Control: Each player can be controlled independently (play, pause, seek)
Resource Efficiency: Reduces network overhead and connection count
Scaling: Better performance when displaying many cameras simultaneously
Shared Fate: If the WebSocket fails, all players are affected

🔧 Code Pattern

// 1. Create shared Media Gateway service
const service = await gwp.buildMediaGatewayService(
  mediaGatewayUrl,
  getTokenFunction
);

// 2. Build individual players
const player1 = gwp.buildPlayer(container1);
const player2 = gwp.buildPlayer(container2);

// 3. Start players with the shared service
await player1.startWithService(cameraGuid1, service);
await player2.startWithService(cameraGuid2, service);

// 4. Control each player independently
player1.playLive();
player2.playLive();