Search code examples
video-streamingiotdashboardios-camerathingsboard

Video feed to ThingsBoard dashboard

I'm currently using ThingsBoard as an IoT broker to capture and display telemetry data from several sensors to a dashboard. I would like to add the capability of displaying a live video feed from a iPhone camera or webcam, and I'm wondering if anyone here knows if ThingsBoard supports any sort of video data stream (either live or timed screen capture based)?

Ideally, I'd like to mount the phone/camera to a servo-controlled mount which I can used to position the camera using controls on the dashboard.

Solution

  • ThingsBoard allows to use Static widget (from Cards bundle) with custom HTML code (at least at v.3.0.1). So you can use "standard" HTML approach to embed "any sort of video data stream".

    Example 1. Quick start

    The simplest case - use preconfigured iframe code from your ipcam or streaming service. Lets use Youtube Live in this example.

    On Youtube:

    1. Find any live streaming (e.g. https://www.youtube.com/watch?v=2yWhvBkEyaY)
    2. Press Share and then Embed buttons.
    3. Copy proposed <iframe> code.

    In TB UI:

    1. Open your dashboard and add Static widget.
    2. Open widget's Advanced tab and paste copied code here. You can replace existing <div> or place your <iframe> inside it, e.g.:
    <div class='card'>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/2yWhvBkEyaY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>
</div>
    1. Save widget. Resize widget to fit video size or vice versa, edit width="XXX" height="YYY" to fit widget size.
    2. Save dashboard.

    That's all.

    Example 2. Customize.

    In the same way you can place HTML5 <video> tag with any available source, see w3scool's code sample:

    <video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

    Also you can embed any JS or even Java player on your dashboard. But keep in mind, that both player and video sources should be accessible from the end user's web browser (via Internet, VPN, etc).