如何在 html 中嵌入来自 Raspberry Pi 的流媒体视频？

Posted 2023-05-07

【中文标题】如何在 html 中嵌入来自 Raspberry Pi 的流媒体视频？

【英文标题】：How to embed streaming video from Raspberry Pi in html?

【发布时间】：2021-04-01 10:38:48

【问题描述】：

我想出了如何从 Raspberry Pi 上的摄像头流式传输视频，以及如何使用如下 URL 在浏览器中接收和查看视频：

http://picamhq:8080/?action=stream

视频类型为M-JPEG，mjpeg-streamer上的信息为here。

现在，由于浏览器能够播放此视频流，我希望它也可以在 html 网页中运行。好处是这样的网页可以额外显示一些按钮来启动和停止流媒体，以及更改参数，例如相机设置。

我查看了几个问题的答案，例如How to embed streaming Video (rtmp) in HTML，但这并不是将视频嵌入到 html 页面中。

我尝试使用如下视频标签：

<video   autoplay controls>
  <source src="http://picamhq:8080/?action=stream" type="video/mjpeg">
  Your browser does not support the video tag.
</video>     

很遗憾，这不起作用。网页显示了一个黑色的矩形，视频应该在其中播放，并且加载整个流似乎需要很长时间，这当然没有效率，因为流永远不会结束。此外，我想要低延迟:-)

然后我查看了this SO question on live html streaming 之类的信息，其中涉及很多复杂的内容。这是否意味着漂亮而简单的 mjpeg-streamer 无法制作与 html video 标签兼容的流？而且浏览器可以播放的流，不一定在html页面中工作？

【参考方案1】：

您使用的解决方案实际上并不是流式传输视频，而是发送单个 JPEG 图像流。

来自文档：

此插件通过 HTTP 从输入插件流式传输 JPEG 数据

如果您查看 MJPEG_Streamer 的演示站点，您也可以看到这一点，因为流的输出显示在“img”标签而不是“视频”标签中：

<p id="streamwrap" class="xform-p">
        <img id="streamimage" class="xform" src="/?action=stream">
</p>

（来自：http://hashey.dip.jp:8090/stream.html - 请注意，在撰写本文时，演示似乎并未发送流）。

您可以将此流转换为视频，或者根据您的要求，您可能只需要添加控制来开始和停止发出请求以从流中获取当前图像。

【讨论】：

难以置信，一个我认为很复杂的问题竟然可以这么简单地解决！谢谢！顺便说一句，如果我刚刚找到一种方法将流作为一系列 jpeg 图像下载到磁盘，因为这个 cam 的实际应用程序是在望远镜上，我需要大量图像“堆叠”以增加图像质量 。 . .

【参考方案2】：

我不是启动/停止方面的专家（我假设您可以通过 ajax 调用 raspberry 网络服务器来控制摄像头），但是使用 iframe 进行显示怎么样？

<iframe   src="http://picamhq:8080/?action=stream">
</iframe>

【讨论】：

这确实有效。但是，在某处我听说要避免使用 iframe，所以我更喜欢 IMG 解决方案作为更合乎逻辑的方法。 iframe 还显示了边框和滚动条，因此它似乎不像 IMG 标签那样缩放图像内容。但对于其他人来说，iframe 可能很有用，知道解决问题的几种方法总是好的。谢谢！