Question

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

理想情况下，我想将手机/相机安装到伺服控制的支架上，然后可以使用仪表板上的控件来放置相机。

Answer 1

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

示例1.快速入门

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

在YouTube上：

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

在TB用户界面中：

打开仪表板并添加“静态”小部件。
打开小部件的“高级”选项卡，然后将复制的代码粘贴到此处。您可以替换现有的<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仪表板

1 个答案: