gwp sample application - Genetec/DAP GitHub Wiki

Genetec Web Player - Sample Application

This comprehensive sample application demonstrates all features of the Genetec Web Player (GWP). The sample serves three purposes:

Demonstration - Shows all GWP capabilities in action
Testing Tool - Verify camera functionality and features
Debugging Tool - Troubleshoot issues with detailed logging and status displays

Download Sample Application

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

Features

The sample application includes:

Player Lifecycle Management - Start and stop the player with proper initialization and cleanup
Playback Controls - Live playback, pause/resume, seeking (±10s, ±1m, specific time), and variable playback speed (-100x to +100x)
PTZ Controls - 9-directional pad for pan/tilt, zoom controls, preset positions, home position, lock/unlock, and low-latency mode
Digital Zoom - Client-side zoom from 1x to 20x with preview and snapshot capabilities
Dewarping - Fisheye lens dewarping with preview controls (when camera is configured with fisheye)
Interactive Timeline - HTML5 canvas showing recording sequences (green bars), bookmarks (blue lines), current time (red line), and playback position (purple line with triangle). Click anywhere on the timeline to seek to that time. Timeline range adjustable from 0.5 to 72 hours in 30-minute increments
Advanced Features - Audio toggle, privacy protection, snapshot capture, debug overlay, stream usage selection, and verbose logging
Real-time Status Monitoring - 10+ status indicators showing connection state, player state, stream status, and more
Event Logging - Color-coded event log with timestamps for debugging

User Interface

The application uses a three-panel layout:

┌─────────────┬──────────────────┬─────────────┐
│   Controls  │   Video Player   │   Status    │
│   (Left)    │   & Timeline     │   & Logs    │
│             │   (Center)       │   (Right)   │
└─────────────┴──────────────────┴─────────────┘

Left Panel (350px) - Connection settings and all control interfaces
Center Panel (Flexible) - Video player, timeline visualization, and advanced features
Right Panel (300px) - Real-time status displays and event log

The layout is responsive and adapts to mobile devices.

Key Implementation Patterns

Event Handler Registration

All event handlers must be registered before calling player.start():

// Register handlers first
player.onErrorStateRaised.register((error) => { /* ... */ });
player.onFrameRendered.register((time) => { /* ... */ });
// ... other handlers

// Then start the player
await player.start(cameraId, mediaGatewayUrl, getToken);

Token Retrieval Function

The player requires a token function that returns a valid authentication token:

async function getToken(cameraId) {
  const credentials = `${username};${appId}:${password}`;
  const response = await fetch(
    `https://${mediaGateway}/media/v2/token/${cameraId}`,
    {
      credentials: 'include',
      headers: { 'Authorization': `Basic ${btoa(credentials)}` }
    }
  );
  return await response.text();
}

Proper Cleanup

Always stop and dispose of the player when done:

player.stop();
player.dispose();
player = null;