14

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

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

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

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

4

3 回答 3

12

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

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

一旦你获得了适当版本的 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 上的服务器配置，因此通过 client_high_ip 服务器到 client_low_ip，同时在 server_ip 上处理 mpeg 到 webm 的对话（下文继续）。

这个 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/

希望这可以帮助。

于 2013-03-16T15:04:24.827 回答
4

埃夫伦，

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

参考 HTML5 直播

所以你的陈述

（不能实时打包 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 请求获取片段更有效。此外，虚幻媒体服务器发送持续时间最短的片段，低至 30 毫秒。这允许低延迟的亚秒级流式传输，而 MPEG-DASH 与其他基于 HTTP 块的实时流式传输协议一样，无法提供低延迟式实时流式传输。

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

于 2017-03-17T20:35:43.530 回答
0

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

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

于 2012-09-06T18:11:03.067 回答