Demos & Operations

Demo Topology

  • All demos are available on the Online Demos page with live preview.
  • Open Source demos: basic playback, MSE, WebSocket-FLV, WebRTC, multi-view, and WebCodecs scenarios.
  • PRO demos: 36+ scenarios organized into live stream, multi-screen, playback, audio/talk, advanced features, UI controls, and encryption categories.

PRO Demo Categories

Live Stream Demos

Full-featured player with codec auto-detection, low-latency mode, and format-specific demos (FLV, fMP4, MPEG4, HLS H.265, naked H.264/H.265, WebRTC). Each demo includes browser capability detection showing MSE, WebCodecs, WASM, and SIMD support status.

Multi-screen Demos

Regular grid layouts (2×2, 3×3, 4×4) and irregular split modes. Demonstrates worker-based decoding for multi-core utilization, drag-sort, per-window selection, and WebSocket-FLV fallback when exceeding Chrome's 6-connection limit.

Playback (Recording) Demos

24-hour timeline and fixed-duration timeline playback with configurable FPS modes: dynamic (from stream) or fixed (local setting). Supports I-frame only decoding at 2x/4x/8x speeds, pre-decode data buffering, and server-side rate push synchronization.

Audio & Talk Demos

Audio-only streaming with selectable audio engine (script, worklet, active), and voice communication (talk) demo with G.711 encoding, RTP encapsulation, and GB standard TCP/UDP transport.

Advanced Feature Demos

Electronic zoom, dynamic/ghost watermarking, custom overlay rendering (text + rectangles), display mode controls (mirror, rotate, aspect ratio), PTZ panel with GB28181 encoding, SEI metadata extraction, video recording (WebM/MP4/FLV), and video carousel.

UI & Control Demos

Bottom bar customization (auto-hide, custom HTML, context menu), button configuration (fullscreen, screenshot, audio, record, PTZ, zoom, rotate, mirror, resolution, performance panel, custom buttons), auto-play, mobile fullscreen, async loading, error recovery with configurable retry policies, and page visibility management.

Encryption Demos

m7s private encryption, SM4 national standard encryption, and XOR encryption for H.264/H.265 streams — with configurable keys and key retrieval domain.

Demo Validation Checklist

  • Verify browser capability detection indicators match your target environment.
  • Test each decode mode toggle (MSE, WebCodecs, WASM, SIMD, multi-threaded) to confirm fallback behavior.
  • Validate stream URL input accepts your protocol format (WebSocket, HTTP, WebRTC).
  • Check multi-screen demos with your expected concurrent stream count.
  • Test playback timeline controls with your VOD stream source for seek accuracy.
  • Verify PTZ events emit correct direction data for your camera integration.
  • Test recording output formats match your storage/processing pipeline requirements.

Operational Recommendations

  • Validate representative demos after upgrading player versions.
  • Track first-frame latency, stutter rate, reconnect count, and decode mode usage in production.
  • Run stress checks for multi-view scenarios before production rollout — Chrome limits same-origin HTTP to 6 concurrent connections.
  • Use debug: true and debugLevel: 'debug' during development, disable in production.
  • Monitor crashLog and playFailedAndPaused events for proactive issue detection.
  • Preserve a reproducible test matrix for regression analysis across browser updates.