html - 仅使用视频标签实时流式传输到 HTML5(不带 webrtc)

Question

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

webm 或 ogv 可以做到这一点，由于其 MDAT 原子，MP4 无法做到这一点。 (不能实时打包h264和mp3打包发给客户端)假设我正在从我的网络摄像头和内置麦克风提供音频输入。碎片化的 mp4 可以解决这个问题，但要找到执行此操作的库很麻烦。

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

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

Answer 1

我使用在 Ubuntu 上运行的 ffmpeg/ffserver 为 webm 做了这个(mp4 和 ogg 更容易一些，并且应该在同一台服务器上以类似的方式工作，但是你应该使用所有 3 种格式以实现跨浏览器的兼容性) .

首先，从源代码构建 ffmpeg 以包含 libvpx 驱动程序(即使您使用的是具有它的版本，您也需要最新的版本(截至本月)来流式传输 webm，因为它们只是添加了包含全局 header 的功能).我在 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 的服务器配置，因此服务器通过 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/

希望这对您有所帮助。