HLS Video Stream

Who it’s for

Security managers, smart city operations centers, and remote site supervisors ask “what is the camera at this location showing right now?” They need a video feed embedded directly in ThingsBoard so operators never have to switch to a separate VMS tool.

What it does

A camera publishing to a media server at https://media.example.com/live/gate-cam/index.m3u8 plays inline inside the dashboard widget. The same widget plays a recorded VOD clip by pointing it at a recorded playlist URL. Typical glass-to-glass latency is 6–30 seconds depending on segment length and player buffer.

• Inline HLS video player that loads any .m3u8 URL stored as a device or asset attribute
• Live and recorded playback — the player handles both live streams and VOD playlists from the same URL field
• Broad browser support — uses hls.js on Chrome, Firefox, and Edge; falls back to the browser’s native HLS engine on Safari
• Fallback URL for when the attribute is empty or the device is offline
• Shows one stream per widget; add multiple widgets to monitor several cameras simultaneously

How to set up

Data keys

Key	Role	Type	Description
hlsStreamUrl	Stream URL	Attribute	The .m3u8 playlist URL to play; change the key name to match your device’s attribute key

The widget ships with a function datasource key labeled hlsStreamUrl that returns a public demo playlist, so it plays a sample stream until you point the datasource at your device’s own attribute.

To point it at your own device: open the dashboard in edit mode, open the widget’s Datasources, pick the entity or entity alias, and replace the function key with the key your device reports.

If the attribute is empty and no fallback URL is configured, the player shows a blank state.

How to customize

• To set a fallback stream — enter a Fallback stream URL in the Video streaming settings; this plays when the data key returns an empty value.
• To control autoplay and mute — toggle Autoplay and Start muted in the Video streaming settings; browsers typically require muted start for autoplay to work.
• To show or hide player controls — toggle Show video controls in the Video streaming settings.
• To adjust the back-buffer length — set Back buffer length (seconds) to control how much already-played footage the player keeps in memory for rewinding.

Tips

• HLS latency is set by the segment duration on the media server, not by the widget — if 6–30 seconds is too slow for your use case, switch to the WebRTC video stream widget which delivers sub-second latency over WHEP signaling.
• Store the stream URL as a shared attribute on the device so it can be updated remotely (e.g. when a camera’s IP changes) without editing the dashboard.
• For multi-camera views, place several HLS video stream widgets in a grid layout and use a single dashboard time filter to keep all feeds in sync during recorded playback.