ThingsBoard 仪表板的视频源

Posted 2023-03-22

【中文标题】ThingsBoard 仪表板的视频源

【英文标题】：Video feed to ThingsBoard dashboard

【发布时间】：2019-07-07 19:16:52

【问题描述】：

我目前使用 ThingsBoard 作为 IoT 代理来捕获来自多个传感器的遥测数据并将其显示到仪表板。我想添加显示来自 iPhone 摄像头或网络摄像头的实时视频源的功能，我想知道这里是否有人知道 ThingsBoard 是否支持任何类型的视频数据流（基于实时或定时屏幕捕获）？

理想情况下，我想将手机/摄像头安装到伺服控制支架上，我可以使用仪表板上的控件来定位摄像头。

【问题讨论】：

你做到了吗？

【参考方案1】：

ThingsBoard 允许使用带有自定义 html 代码 (at least at v.3.0.1) 的静态小部件（来自 Cards 包）。因此，您可以使用“标准”HTML 方法嵌入“任何类型的视频数据流”。

示例 1. 快速入门

最简单的情况 - 使用来自 ipcam 或流媒体服务的预配置 iframe 代码。让我们在这个例子中使用 Youtube Live。

在 Youtube 上：

查找任何直播（例如https://www.youtube.com/watch?v=2yWhvBkEyaY） 按“共享”，然后按“嵌入”按钮。 复制建议的<iframe> 代码。

在 TB 用户界面中：

打开仪表板并添加静态小部件。 打开小部件的高级选项卡并将复制的代码粘贴到此处。您可以替换现有的<div> 或将您的<iframe> 放入其中，例如：

<div class='card'>
    <iframe   src="https://www.youtube.com/embed/2yWhvBkEyaY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>
</div>

保存小部件。调整小部件的大小以适应视频大小，反之亦然，编辑width="XXX" height="YYY" 以适应小部件的大小。 保存仪表板。

就是这样。

示例 2. 自定义。

以同样的方式，您可以将 HTML5 <video> 标记与任何可用源一起放置，请参阅w3scool's code sample：

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

您还可以在仪表板上嵌入任何 JS 甚至 Java 播放器。但请记住，播放器和视频源都应该可以从最终用户的网络浏览器（通过 Internet、*** 等）访问。