gwp multiplexing sample

GWP multiplexing sample

This sample demonstrates how to display multiple cameras simultaneously over a single WebSocket connection using GWP's multiplexing feature. The pattern is well suited to multi-camera grids, video walls, and surveillance dashboards.

Download the sample application

View HTML source code. Copy the code or use your browser's "Save As" to download and run locally.

What is multiplexing?

Multiplexing lets multiple GWP players share a single WebSocket connection to the Media Gateway instead of creating one connection per player. The shared connection provides:

• Reduced connection overhead: one WebSocket instead of N connections.
• Lower network and server resource usage.
• Better scalability for large numbers of simultaneous cameras.
• One shared service that manages all streams.

Sample features

• Flexible grid layouts: 2x2 (4 cameras), 3x3 (9 cameras), or 4x4 (16 cameras).
• All cameras share a single WebSocket via buildMediaGatewayService().
• Each player can be controlled independently.
• Add or remove cameras by GUID at runtime.
• Per-camera status indicators.
• Real-time statistics for connections, active players, and streaming count.

Key implementation

The sample is built around four steps: create the shared service, build players, start them through the service, and then control each player independently.

Create the shared service

Create one Media Gateway service that every player will share:

const mediaGatewayService = await gwp.buildMediaGatewayService(
  `https://${mediaGateway}/media`,
  getToken
);

Build individual players

Each camera gets its own player instance:

const player = gwp.buildPlayer(containerElement);

Start with the shared service

Call startWithService() instead of start() so the player connects through the shared service:

await player.startWithService(cameraGuid, mediaGatewayService);
player.playLive();

Control each player independently

Each player can be controlled independently despite sharing the connection:

player1.playLive();
player2.pause();
player3.seek(timestamp);

Multiplexed vs. individual connections

Feature	Multiplexed	Individual connections
WebSocket connections	1 (shared)	N (one per player)
Network overhead	Low	High (N connections)
Media Gateway load	Lower	Higher
Scalability	Better for many cameras	Limited by connection count
Failure impact	All players affected	Only the failed player affected
Setup complexity	Slightly more complex	Simpler

When to use multiplexing

Use these guidelines to decide whether multiplexing fits your deployment.

Use multiplexing when

• Displaying four or more cameras simultaneously.
• Building video walls or dashboards.
• Connection count is limited.
• Network efficiency is a priority.
• All cameras connect to the same Media Gateway.

Use individual connections when

• Displaying one to three cameras.
• Cameras connect to different Media Gateways.
• Isolation is critical (one failure should not affect others).
• Simplicity is preferred over efficiency.

Limitations

• All players must connect to the same Media Gateway.
• If the shared WebSocket fails, all players are affected.
• Do not mix start() and startWithService() on the same service.
• Error recovery is slightly more complex than for individual connections.

See also

• Genetec Web Player developer guide: Embedding the Genetec Web Player in browser-based applications.
• Web Player sample application: Single-player GWP sample with playback, PTZ, and dewarping controls.
• GWP API reference: Genetec Web Player API reference (TypeScript definitions and methods).