gwp sample application

Genetec Web Player - Sample Application

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

1. Demonstration - Shows all GWP capabilities in action
2. Testing Tool - Verify camera functionality and features
3. 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;

See also

• Genetec Web Player Developer Guide - Comprehensive guide to GWP features
• GWP API Reference - Complete API documentation
• GWP Multiplexing Sample - Multi-camera grid demo with shared WebSocket
• Media Gateway Developer Guide - Setting up Media Gateway