如何在 html 中嵌入来自 Raspberry Pi 的流媒体视频？
How to embed streaming video from Raspberry Pi in html?
我想出了如何从 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 页面内有效？
我不是 start/stop 方面的专家（我想您可以通过 ajax 调用树莓派网络服务器来控制摄像头），但是使用 iframe 进行显示怎么样？
<iframe width="640" height="355" src="http://picamhq:8080/?action=stream">
</iframe>
您使用的解决方案实际上不是流式传输视频，而是发送单个 JPEG 图像流。
来自文档：
- 此插件通过 HTTP 从输入插件流式传输 JPEG 数据
如果您查看 MJPEG_Streamer 的演示站点，您也可以看到这一点，因为流的输出显示在 'img' 标记而不是 'video' 标记中：
<p id="streamwrap" class="xform-p">
<img id="streamimage" class="xform" src="/?action=stream">
</p>
（来自：http://hashey.dip.jp:8090/stream.html - 请注意，在撰写本文时演示似乎并未发送流）。
您可以将此流转换为视频，或者根据您的要求，您可能只需要添加控件以启动和停止发出请求以从流中获取当前图像。
我想出了如何从 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 页面内有效？
我不是 start/stop 方面的专家（我想您可以通过 ajax 调用树莓派网络服务器来控制摄像头），但是使用 iframe 进行显示怎么样？
<iframe width="640" height="355" src="http://picamhq:8080/?action=stream">
</iframe>
您使用的解决方案实际上不是流式传输视频，而是发送单个 JPEG 图像流。
来自文档：
- 此插件通过 HTTP 从输入插件流式传输 JPEG 数据
如果您查看 MJPEG_Streamer 的演示站点，您也可以看到这一点，因为流的输出显示在 'img' 标记而不是 'video' 标记中：
<p id="streamwrap" class="xform-p">
<img id="streamimage" class="xform" src="/?action=stream">
</p>
（来自：http://hashey.dip.jp:8090/stream.html - 请注意，在撰写本文时演示似乎并未发送流）。
您可以将此流转换为视频，或者根据您的要求，您可能只需要添加控件以启动和停止发出请求以从流中获取当前图像。