仅使用视频标签实时流式传输到 HTML5（没有 webrtc）

Posted 2023-05-07

【中文标题】仅使用视频标签实时流式传输到 HTML5（没有 webrtc）

【英文标题】：Real Time Streaming to HTML5 (with out webrtc) just using video tag

【发布时间】：2012-08-28 18:36:34

【问题描述】：

我想将实时编码数据包装到 webm 或 ogv 并将其发送到 html5 浏览器。

webm 或 ogv 可以做到这一点， 由于其 MDAT 原子，Mp4 无法做到这一点。 （不能实时打包 h264 和 mp3 打包发送给客户端） 假设我正在输入来自网络摄像头的输入和来自内置麦克风的音频。 碎片化的 mp4 可以处理这个问题，但是要找到库来做到这一点很麻烦）。

我需要这样做，因为我不想单独发送音频和视频。

如果我确实分开发送，通过音频标签发送音频，通过视频发送视频>（音频和视频被解复用并发送） 我可以使用 javascript 在客户端浏览器上同步它们吗？我看到了一些例子，但还不确定。

【问题讨论】：

我使用 Stream-m 服务器将 webm 流中继到客户端 HTML5 视频标签。 github.com/yomguy/stream-m 在生产中运行良好。干杯编辑：请注意，IceCast 现在也可以开箱即用地流式传输 WebM ;)

【参考方案1】：

我使用在 Ubuntu 上运行的 ffmpeg/ffserver 执行此操作，如下所示用于 webm（mp4 和 ogg 更容易一些，并且应该在同一服务器上以类似的方式工作，但您应该使用所有 3 种格式以实现跨浏览器的兼容性） .

首先，从源代码构建 ffmpeg 以包含 libvpx 驱动程序（即使您使用具有它的版本，您也需要最新的（截至本月）来流式传输 webm，因为它们只是添加了包含全局标头的功能）。我是在 Ubuntu 服务器和桌面上完成的，this guide 向我展示了如何 - 其他操作系统的说明 can be found here。

获得适当版本的 ffmpeg/ffserver 后，您可以将它们设置为流式传输，在我的例子中，这是按如下方式完成的。

在视频捕获设备上：

ffmpeg -f video4linux2 -standard ntsc -i /dev/video0 http://<server_ip>:8090/0.ffm

其中的“-f video4linux2 -standard ntsc -i /dev/video0”部分可能会根据您的输入源而改变（我的是用于视频采集卡）。

相关ffserver.conf摘录：

Port 8090
#BindAddress <server_ip>
MaxHTTPConnections 2000
MAXClients 100
MaxBandwidth 1000000
CustomLog /var/log/ffserver
NoDaemon

<Feed 0.ffm>
File /tmp/0.ffm
FileMaxSize 5M
ACL allow <feeder_ip>
</Feed>
<Feed 0_webm.ffm>
File /tmp/0_webm.ffm
FileMaxSize 5M
ACL allow localhost
</Feed>

<Stream 0.mpg>
Feed 0.ffm
Format mpeg1video
NoAudio
VideoFrameRate 25
VideoBitRate 256
VideoSize cif
VideoBufferSize 40
VideoGopSize 12
</Stream>
<Stream 0.webm>
Feed 0_webm.ffm
Format webm
NoAudio
VideoCodec libvpx
VideoSize 320x240
VideoFrameRate 24
AVOptionVideo flags +global_header
AVOptionVideo cpu-used 0
AVOptionVideo qmin 1
AVOptionVideo qmax 31
AVOptionVideo quality good
PreRoll 0
StartSendOnKey
VideoBitRate 500K
</Stream>

<Stream index.html>
Format status
ACL allow <client_low_ip> <client_high_ip>
</Stream>

请注意，这是为 feeder_ip 上的服务器配置的，以执行上述 ffmpeg 命令，并为 server_ip 上的服务器配置，因此在 server_ip 上处理 mpeg 到 webm 的对话时，通过 client_high_ip 服务器到 client_low_ip（下文继续）。

这个 ffmpeg 命令在以前称为 server_ip 的机器上执行（它处理实际的 mpeg --> webm 转换并将其反馈到不同提要上的 ffserver）：

ffmpeg -i http://<server_ip>:8090/0.mpg -vcodec libvpx http://localhost:8090/0_webm.ffm

一旦这些都启动了（首先是 ffserver，然后是 feeder_ip ffmpeg 进程，然后是 server_ip ffmpeg 进程），您应该能够在 http://:8090/0.webm 访问实时流并检查http://:8090/的状态

希望这会有所帮助。

【讨论】：

@EvrenBingøl，你能提供更多信息吗？

这已经有一段时间了，所以这是我记得的；客户端从服务器请求一个代表实时视频的 ogv 文件。正在发送的数据使用 directX 在服务器上即时转换为 ogv。所以说你想做一个视频聊天。您会将视频和音频数据及其标头（可能是任何类型）发送到服务器，directx 将其转换为 ogv 并将其发送到接收端。 Ogv 可以很好地处理块。

如果有人使用此配置，请将端口更新为 HTTPPort，地址更新为 HTTPAddress，删除 NoDeamon

【参考方案2】：

埃夫伦，

既然您最初问过这个问题，媒体源扩展 https://www.w3.org/TR/media-source/ 已经足够成熟，能够播放非常短（30 毫秒）的 ISO-BMFF 视频/mp4 片段，只需一点缓冲。

参考 HTML5 live streaming

所以你的陈述

（不能实时打包h264和mp3打包发送给客户端）

现在已经过时了。是的，你可以用 h264 + AAC 做到这一点。

那里有几种实现方式；看看虚幻媒体服务器。 来自虚幻媒体服务器常见问题解答：http://umediaserver.net/umediaserver/faq.html

Unreal HTML5 直播与 MPEG-DASH 有何不同？ 与 MPEG-DASH 不同，Unreal Media Server 使用 WebSocket 协议在 Web 浏览器中实时流式传输到 HTML5 MSE 元素。这比通过每个 MPEG-DASH 的 HTTP 请求获取片段更有效。此外，Unreal Media Server 发送持续时间最短的片段，低至 30 毫秒。这允许低延迟的亚秒级流式传输，而 MPEG-DASH 与其他基于 HTTP 块的实时流式传输协议一样，无法提供低延迟式实时流式传输。

他们的演示网页有来自 RTSP 摄像头的实时 HTML5 提要： http://umediaserver.net/umediaserver/demos.html 请注意，HTML5 播放器中的延迟与 Flash 播放器中的延迟相当。

【讨论】：

这读起来像是虚幻的广告。 “那里有几种实现”，但唯一的建议是来自 Unreal 的需要许可证的单一解决方案。由于这是一个比 4 年前最好的答案更当前的答案，很高兴看到几个实现之一成为其他人可以构建的一个。

【参考方案3】：

不是 100% 确定您可以做到这一点。 HTML5 尚未批准任何直播机制。您可以使用 websockets 并将数据实时发送到浏览器来执行此操作。但是您必须自己编写解析逻辑，而且我不知道在数据到达播放器时您将如何提供数据。

关于视频和音频标签：视频标签可以播放包含音频和视频的容器文件。因此，将您的内容包装在兼容的容器中。如果您修改浏览器以将实时流写入此视频文件，因为实时内容不断进入并为浏览器请求的每个字节流式传输该数据，这可以完成。但这绝对不是小事。

【讨论】：

我需要读取一个 wmv 文件。以渲染速度实时对其进行转码。（好像我正在观看而不是写入文件）编码为 VP8 并将其包装在 webm 中。浏览器将指向正在转码的 file.webm。发出请求时，我将在服务器端进行长轮询。我将写入那个http套接字（你可以随便命名它，说“响应”）所以有一种通信方式，即服务器将webm文件推送到浏览器。浏览器是渐进式下载文件，至少它认为它是一个文件，但它实际上是一个被包裹在webm中的直播。

可行。可能更简单地直接写入文件并从网络服务器提供文件。使用设置为目标比特率的网络服务器限制，以确保它是“实时”提供的，而不是更快或更慢。给转码一些先机以获得一些空间。应该管用。节流很重要，这样播放器的拉动速度就不能超过您制作的速度（目标比特率）