streaming-expert_skill
- TypeScript
0
GitHub Stars
1
Bundled Files
2 months ago
Catalog Refreshed
4 months ago
First Indexed
Readme & install
Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.
Installation
Preview and clipboard use veilstrat where the catalogue uses aiagentskills.
npx veilstrat add skill pluxity/pf-frontend --skill streaming-expert- SKILL.md5.1 KB
Overview
This skill is a video streaming expert focused on CCTV, HLS, WHEP, and low-latency streaming patterns. It helps diagnose playback issues, choose protocols, configure clients, and implement reliable reconnection and buffering strategies. Use it to optimize latency, stability, and multi-camera layouts in web applications.
How this skill works
The skill inspects stream URLs, client configuration, buffering parameters, and connection state to recommend concrete changes. It explains HLS and WHEP trade-offs, suggests hls.js and WebRTC settings, and produces code snippets for player hooks, headless components, and reconnection logic. It also outlines server-side requirements and monitoring metrics to validate real-world performance.
When to use it
- Choosing between HLS and WHEP for live CCTV use cases
- Debugging no-video, CORS, or auth-related playback failures
- Reducing end-to-end latency for live monitoring
- Tuning buffer and reconnection settings to reduce stalling
- Designing multi-camera grid layouts for browsers
Best practices
- Prefer HLS for wide compatibility and stability; enable LL-HLS settings for lower latency when supported
- Use WHEP/WebRTC for sub-second latency; expect more complex server setup and signaling
- Mute multiple simultaneous video elements and limit active streams per tab to 4–6 for better browser performance
- Implement automatic reconnect with exponential or fixed backoff and max attempts for WebRTC/WHEP
- Collect runtime stats (latency, bufferedDuration, bandwidth, droppedFrames) and use them to adapt buffer and quality settings dynamically
Example use cases
- Implement a headless CCTVPlayer component that supports both "hls" and "whep" protocols for a dashboard
- Integrate useHLSStream with LL-HLS options to target 1–3s latency for live feeds
- Switch to useWHEPStream for ultra-low-latency operations like live intervention or remote control (~1s)
- Build a multi-camera grid with muted streams and per-tile lazy connect to reduce CPU/network load
- Add reconnectInterval and maxReconnectAttempts to WHEP clients to maintain connections in unstable networks
FAQ
Check CORS and authentication, verify m3u8/segment requests in Network tab, inspect browser console for decoder or MIME errors, and ensure HTTPS for WHEP.
How do I reduce HLS latency?
Enable LL-HLS or lowLatencyMode, reduce liveSyncDurationCount, lower max buffer lengths, and tune segment duration on the packager; or consider WHEP for sub-second needs.
