ThingsBoard 仪表板的视频提要

Question

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

理想情况下，我想将 phone/camera 安装到一个伺服控制支架上，我可以使用它来使用仪表板上的控件来定位相机。

Answer 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 UI:

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

<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>

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

就这些了。

示例 2.自定义。

以相同的方式，您可以将 HTML5 <video> 标记与任何可用来源一起放置，请参阅 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>

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

ThingsBoard 仪表板的视频提要

Video feed to ThingsBoard dashboard

dashboard

video-streaming

ios-camera

iot

thingsboard