在 HTML 视频标签中流式传输实时视频流量

Question

我想将来自 udp 的实时视频流传输到 HTML video 标签中。我做了一些研究，但我得到了很多信息，我很难清楚地了解我能做什么和不能做什么。

视频通量使用 H.264 和 AAC 编解码器、MP4 容器并具有 3840x2160 (4K) 分辨率。我想在 Chrome（最新版本）上播放它。

据我了解，HTML video 标签可以原生读取 H.264/AAC 视频。我让它在我的服务器上直接与视频一起工作（我使用的是 Meteor JS + React）。

我学会了使用 FFmpeg 流式传输由 VLC 播放器读取的 udp 通量，然后我使用 FFserver（我知道它已被弃用）创建一个 HTTP 通量也由 VLC 读取但不由 HTML video标签。

所以...我的问题是：HTML video 可以从 HTTP 本地读取视频流吗？

我看过很多关于 HLS 和 DASH 的讨论，但我不明白它们是否（以及为什么）是强制性的。

我读到 post 关于有人只使用 FFmpeg 创建 HLS m3u8，这是一个可行的解决方案吗？

FF服务器配置

HTTPPort                        8090
HTTPBindAddress                 0.0.0.0
MaxHTTPConnections              20
MaxClients                      10
MaxBandwidth                    100000

<Feed feed.ffm>
  File                          /tmp/feed.ffm
  FileMaxSize                   1g
  ACL allow                     127.0.0.1
</Feed>

<Stream stream.mpeg>
  Feed                          feed.ffm
  Format                        mpeg
  AudioCodec                    aac
  AudioBitRate                  256
  AudioChannels                 1
  VideoCodec                    libx264
  VideoBitRate                  10000      // Total random here
  VideoBitRateRange             5000-15000 // And here...
  VideoFrameRate                30
  VideoQMin                     1
  VideoQMax                     50
  VideoSize                     3840x2160
  VideoBufferSize               20000      // Not sure either
  AVOptionVideo                 flags +global_header
</Stream>

我必须指定 QMin 和 QMax 以避免错误消息，但我真的不明白它是什么。

FFmpeg 命令行

ffmpeg -re -i bbb_sunflower_2160p_30fps_normal.mp4 -strict -2 -r 30 -vcodec libx264 http://localhost:8090/feed.ffm

这适用于 VLC。在移动到 udp 流之前，我正在处理计算机上的文件。

Answer 1

浏览器对媒体的支持是一个不断变化的环境，因此值得拥有一些地方来寻找最新的视图。

根据我的经验，link 中的 table 通常是最新的：

https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

您会注意到 table 包括编解码器和容器 - 例如mp4 中的 h.264。了解这一点很重要，因为您的浏览器可能支持编解码器，但您想要的容器不支持该编解码器。

对于支持的容器和编解码器，HTML5 标签将支持 HTTP 流或更准确的 HTTP 下载。大多数服务器和浏览器都支持分块下载视频文件，以便您可以在视频完全下载之前开始观看。

为了在不同设备类型和不同网络条件下获得更好的性能，视频通常通过 Adjustable 比特率 (ABR) 协议（例如 HLS 或 DASH）传送。 ABR 还允许客户端设备或播放器以块的形式下载视频，例如 10 秒块，但服务器以多个不同比特率版本提供每个块。播放器可以从最适合当前网络条件的比特率 select 下一个块。另请参阅此答案中的更多信息：

在 HTML 视频标签中流式传输实时视频流量

Stream real-time video flux in HTML video tag

html

javascript

video

ffmpeg

meteor