直播 RTMP 转 HTML5

Posted 2023-02-25

技术标签:

【中文标题】直播 RTMP 转 HTML5【英文标题】：Live streaming RTMP to HTML5 【发布时间】：2015-08-11 08:59:24 【问题描述】：

我有一个来自Unreal Media Server 的RTMP 直播流，我需要在带有<video> 标签的html5 页面上显示它。到目前为止，我正在考虑使用 ffmpeg 库使用 H.264 编解码器对流进行转码并将其输出到 .mp4 文件，然后通过 http 协议访问它，如下所示：http://ip_addr/output_from_ffmpeg.mp4 但是，我不确定这是否会播放从头开始的整个输出文件或实时流式传输。我当前用于对流进行转码的 ffmpeg 命令是：

ffmpeg -i rtmp://IP_addr_of_rtmp_stream:5119/live/Roulette -c:v libx264 -maxrate 1000k -bufsize 2000k -g 50 output.mp4

谁能指出我正确的方向？我还在文档中读到 ffserver 能够实现这一点，但 windows 构建不可用。

【问题讨论】：

【参考方案1】：

您不能使用mp4 格式进行直播，也不能仅使用 HTML5 标签进行直播。您的命令将流记录在静态 mp4 文件中，以通过 HTTP 渐进式下载提供服务。

RTMP 需要 Flash 播放器。替代方案包括 HLS 和支持桌面 Flash 回退的网络播放器（例如 Clappr、JWPlayer、Flowplayer）或通过支持它的浏览器上的媒体源扩展 (MSE) 的 DASH。

【讨论】：

【参考方案2】：

我最终使用VLC Player（使用FFmpeg）使用H.264编解码器对RTMP流进行转码，并使用VLC的内置http服务器以.ogg格式显示它。我还为基于 Apple 的设备启动了另一个 VLC 实例，用于 HLS 流媒体。以下是 H.264 和 HLS 的两个命令（注意：我在 Windows 上执行此操作，并将 wamp 用于 HLS 流，因为在这种情况下 VLC 不提供传输方式）：

vlc.exe -I dummy rtmp://_ip_addr_of_the_rtmp_stream :network-caching=0 :sout=#transcodevcodec=theo,vb=512,scale=1,acodec=none:httpmux=ogg,dst=:8181/stream.ogg :no-sout-rtp-sap :no-sout-standard-sap :sout-keep

vlc.exe -I dummy rtmp://_ip_addr_of_the_rtmp_stream :network-caching=0 :sout="#transcodevcodec=h264,vb=500, venc=x264aud,profile=baseline,level=30,keyint=30,ref=1, aenc=none :stdaccess=livehttpseglen=10,delsegs=true,numsegs=5, index=C:\wamp\www\stream.m3u8, index-url=http://_ip_addr_of_your_web_server/stream-########.ts, mux=tsuse-key-frames, dst=C:\wamp\www\stream-########.ts"

然后在html页面中：

<video   controls autoplay>
  <source src="http://_ip_addr_of_your_web_server/stream.m3u8" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
  <source src="http://_ip_addr_of_your_web_server:8181/stream.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>