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: trueanddebugLevel: 'debug'during development, disable in production. - Monitor
crashLogandplayFailedAndPausedevents for proactive issue detection. - Preserve a reproducible test matrix for regression analysis across browser updates.