向ThingsBoard仪表板提供视频资料

2 人关注

我目前正在使用ThingsBoard作为物联网代理，从几个传感器捕捉和显示遥测数据到仪表板。我想增加显示来自iPhone摄像头或网络摄像头的实时视频的能力，我想知道这里是否有人知道ThingsBoard是否支持任何类型的视频数据流（无论是实时还是基于屏幕捕获的定时）？

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

1 个评论

Horaceman ：

你设法做到了吗？

video-streaming

iot

dashboard

ios-camera

thingsboard

Jason O

发布于 2019-02-14

1 个回答

viktorkho

发布于 2020-06-22

已采纳

0 人赞同

ThingsBoard允许使用带有自定义HTML代码的静态部件（来自Cards bundle）（至少在3.0.1版）。所以你可以使用 "标准 "的HTML方法来嵌入 "任何种类的视频数据流"。

例子1.快速启动

最简单的情况 - 使用来自你的摄像头或流媒体服务的预配置的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>
保存小组件。调整小组件的大小以适应视频的大小，反之亦然，编辑width="XXX" height="YYY" 以适应小组件的大小。
保存仪表板。
这就是全部。
例2.自定义。
以同样的方式，你可以将HTML5<video> 标签与任何可用的源，见w3scool的代码样本。
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">