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

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

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

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

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

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

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

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

<video width="320" height="240" 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 视频标签兼容的流？浏览器可以播放的流不一定在 html 页面中工作？

解决方法

您使用的解决方案实际上并不是流式传输视频，而是发送单个 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 - 请注意，在撰写本文时，演示似乎并未发送流）。

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

我不是启动/停止方面的专家（我假设您可以通过对 raspberry 网络服务器的 ajax 调用来控制相机），但是如何使用 iframe 进行显示？

<iframe width="640" height="355" src="http://picamhq:8080/?action=stream">
</iframe>