gwp sample application

Genetec Web Player sample application

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

1. Demonstration: shows GWP capabilities in action.
2. Testing tool: verify camera functionality and features.
3. Debugging tool: troubleshoot issues with detailed logging and status displays.

Download the 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 with proper initialization and cleanup.
• Playback controls: live playback, pause and resume, seeking (±10s, ±1m, specific time), and variable playback speed (-100x to +100x).
• PTZ controls: 9-directional pad for pan and tilt, zoom controls, preset positions, home position, lock and unlock, and low-latency mode.
• Digital zoom: client-side zoom from 1x to 20x with preview and snapshot capabilities.
• Fisheye dewarping with preview controls, when the camera is configured with a fisheye lens.
• 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. The timeline range adjusts 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 with 10+ 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)    │   and timeline   │   and logs  │
│             │   (center)       │   (right)   │
└─────────────┴──────────────────┴─────────────┘

• Left panel (350px): connection settings and control interfaces.
• Center panel (flexible width): 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

Use these patterns to structure the sample application and the event-handling flow.

Event-handler registration

Register all event handlers 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();
}

Cleanup

Stop and dispose of the player when the application no longer needs it:

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

See also

• Genetec Web Player developer guide: Embedding the Genetec Web Player in browser-based applications.
• GWP API reference: Genetec Web Player API reference (TypeScript definitions and methods).
• GWP multiplexing sample: Multi-camera GWP grid sharing one WebSocket connection.
• Media Gateway developer guide: RTSP and HTTP video streaming through the Media Gateway role.