FLV Video Stream

Who it’s for

Operators and security teams watching cameras or process lines ask “how do I put a live camera feed on the same dashboard as my other data, without a noticeable delay?” They already have a media server, NVR, or camera that exposes a stream over HTTP-FLV, and want to view it on the dashboard, not manage the stream itself.

What it does

A data key resolves to https://liteavapp.qcloud.com/live/liteavdemoplayerstreamid.flv, and the widget starts playing that stream within a couple of seconds, muted, with no clicks needed.

• Low-latency HTTP-FLV playback, typically 1-3 seconds behind the source — close enough for live monitoring, not a buffered catch-up view.
• Detects live vs. recorded on its own, from the stream’s own metadata, and switches into the matching playback mode. There is nothing to configure.
• Autoplay that adapts to the browser: if a browser blocks autoplay with sound, the widget retries muted; if even that is blocked, it shows a short message and starts on the next tap or click.
• Reconnects automatically after a stream error, retrying three times with a growing delay before it gives up and shows a message.
• Pauses while its browser tab is hidden and reconnects at the live edge, instead of resuming a stale buffer, once the tab is visible again. Picture-in-Picture keeps playing throughout.
• Plays one stream from one data key; it doesn’t record, transcode, or show more than one camera in a single widget.

Requirements

This widget needs something to point it at: a media server, NVR, or camera that already serves a live or recorded stream over HTTP-FLV (for example ZLMediaKit, SRS, or nginx-http-flv-module). It plays that stream; it doesn’t provide one.

How to set up

Data keys

Key	Role	Type	Description
Any name (flvStreamUrl by default)	Stream URL	Attribute, timeseries, or computed value	The latest value must be a full .flv URL, for example https://<host>/live/camera1/stream.flv

Add exactly one data key; the widget only reads one. If the key has no value, the widget plays Fallback stream URL from the settings below instead. If both are empty, it shows a “No stream URL configured” placeholder rather than an error.

Video streaming

Setting	Default	Effect
Fallback stream URL	Empty	Plays when the data key is empty or missing

How to customize

• To stop the stream from starting on its own — turn off Autoplay.
• To start with sound on — turn off Start muted. If the browser still blocks unmuted autoplay, the widget falls back to muted playback automatically.
• To hide the play/pause, volume, and fullscreen controls — turn off Show video controls.

Tips

• The widget loads mpegts.js from a CDN at runtime. If the network the dashboard runs on blocks outbound access to cdn.jsdelivr.net, no stream will play.
• If the dashboard is served over HTTPS, use an HTTPS stream URL too — browsers block a plain HTTP video stream on an HTTPS page.
• After three failed reconnect attempts, the widget stops retrying on its own. Fix the stream, then update the data key’s value (or reopen the dashboard) to start a fresh attempt.
• If you see “Autoplay was blocked — tap the video to play,” click anywhere on the widget once to start it; the browser only needs that first gesture.