使用视频标签实时流式传输到HTML5(没有webrtc)

Question

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

webm或ogv可以这样做,Mp4由于它的MDAT原子不能这样做.(一个人不能实时包装h264和mp3并将其包装并发送给客户端)说我从我的摄像头输入输入和内置麦克风的音频.碎片化的mp4可以解决这个问题,但是找到libs来做这件事很麻烦).

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

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

Answer 1

我使用在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转换并将其反馈到另一个feed上的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 /

希望这可以帮助.

Answer 2

埃夫伦，

由于您最初提出了这个问题，媒体源扩展 https://www.w3.org/TR/media-source/已经足够成熟，能够播放非常短（30ms）的 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 播放器中的延迟相当。