Skip to content

gwp multiplexing sample

Jump to bottom
Andre Lafleur edited this page Feb 3, 2026 · 3 revisions

GWP Multiplexing Sample

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

Download 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 allows multiple GWP players to share a single WebSocket connection to the Media Gateway instead of creating one connection per player. This provides:

  • Reduced Connection Overhead - Only one WebSocket instead of N connections
  • Better Performance - Lower network and server resource usage
  • Scalability - Handle more simultaneous cameras
  • Simplified Management - One shared service manages all streams

Sample Features

  • Flexible Grid Layouts - 2x2 (4 cameras), 3x3 (9 cameras), or 4x4 (16 cameras)
  • Shared WebSocket - All cameras use one connection via buildMediaGatewayService()
  • Individual Control - Each player can be controlled independently
  • Dynamic Camera Configuration - Add/remove cameras by GUID
  • Visual Status Indicators - See connection status for each camera
  • Real-time Statistics - Monitor connections, active players, and streaming count

Key Implementation

1. Create Shared Service

Create one Media Gateway service that all players will share:

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

2. Build Individual Players

Each camera gets its own player instance:

const player = gwp.buildPlayer(containerElement);

3. Start with Shared Service

Use startWithService() instead of start() to connect through the shared service:

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

4. Independent Control

Each player can be controlled independently despite sharing the connection:

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

Benefits vs. Individual Connections

Feature Multiplexing Individual Connections
WebSocket Connections 1 (shared) N (one per player)
Network Overhead Low High (N connections)
Media Gateway Load Lower Higher
Scalability Better (more cameras) Limited by connection count
Failure Impact All players affected Only failed player affected
Setup Complexity Slightly more complex Simpler

When to Use Multiplexing

Use multiplexing when:

  • Displaying 4+ cameras simultaneously
  • Building video walls or dashboards
  • Connection count is limited
  • Network efficiency is important
  • All cameras connect to the same Media Gateway

Use individual connections when:

  • Displaying 1-3 cameras
  • Cameras connect to different Media Gateways
  • Isolation is critical (one failure shouldn't 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
  • Cannot mix start() and startWithService() on the same service
  • Slightly more complex error recovery

See also

Security Center SDK

  • Security Center SDK Developer Guide Overview of the SDK framework and how to build integrations with Security Center.

    • Platform SDK

      • Overview Introduction to the Platform SDK and core concepts.
      • Connecting to Security Center Step-by-step guide for connecting and authenticating with the SDK.
      • SDK Certificates Details certificates, licensing, and connection validation.
      • Referencing SDK Assemblies Best practices for referencing assemblies and resolving them at runtime.
      • SDK Compatibility Guide Understanding backward compatibility and versioning in the SDK.
      • Entity Guide Explains the core entity model, inheritance, and how to work with entities.
      • Entity Cache Guide Describes the engine's local entity cache and synchronization.
      • Transactions Covers batching operations for performance and consistency.
      • Events Subscribing to real-time system events.
      • Actions Sending actions to Security Center.
      • Security Desk Displaying content on monitors, reading tiles, sending tasks, and messaging operators.
      • Custom Events Defining, raising, and subscribing to custom events.
      • ReportManager Querying entities and activity data from Security Center.
      • ReportManager Query Reference Complete reference of query types, parameters, and response formats.
      • Privileges Checking, querying, and setting user privileges.
      • Partitions Entity organization and access control through partitions.
      • Logging How to configure logging, diagnostics, and debug methods.

    • Plugin SDK

    • Workspace SDK

    • Macro SDK

      • Overview How macros work, creating and configuring macro entities, automation, and monitoring.
      • Developer Guide Developing macro code with the UserMacro class and Security Center SDK.

Web SDK Developer Guide

  • Getting Started Setup, authentication, and basic configuration for the Web SDK.
  • Referencing Entities Entity discovery, search capabilities, and parameter formats.
  • Entity Operations CRUD operations, multi-value fields, and method execution.
  • About access control in the Web SDK Concepts, relationships, and common access-control operations.
  • About video in the Web SDK Concepts, relationships, configuration, and common video operations.
  • Users and user groups Creating users, managing group membership, and assigning privileges.
  • Partitions Managing partitions, entity membership, and user access control.
  • Custom Fields Creating, reading, writing, and filtering custom entity fields.
  • Custom Card Formats Managing custom credential card format definitions.
  • Actions Control operations for doors, cameras, macros, and notifications.
  • Events and Alarms Real-time event monitoring, alarm monitoring, and custom events.
  • Incidents Incident management, creation, and attachment handling.
  • Reports Activity reports, entity queries, and historical data retrieval.
  • Tasks Listing and executing saved report tasks.
  • Macros Monitoring currently running macros.
  • Custom Entity Types Listing, retrieving, and deleting custom entity type descriptors.
  • System Endpoints License usage, web tokens, and exception handling.
  • Performance Guide Optimization tips and best practices for efficient API usage.
  • Reference Entity GUIDs, EntityType enumeration, and EventType enumeration.
  • Under the Hood Technical architecture, query reflection, and SDK internals.
  • Troubleshooting Common error resolution and debugging techniques.

Media Gateway Developer Guide

Web Player Developer Guide

  • Developer Guide Complete guide to integrating GWP for live and playback video streaming.
  • API Reference Full API documentation with interfaces, methods, properties, and events.
  • Sample Application Comprehensive demo showcasing all GWP features with timeline and PTZ controls.
  • Multiplexing Sample Multi-camera grid demo using a shared WebSocket connection.

Clone this wiki locally