如何使用 HLS 格式正确从 S3 存储桶传输视频

Question

我对我为了好玩而制作的视频流应用程序感到非常困惑。

我有：

• Node JS 服务器
• 迷你桶
• Javascript 客户端
• HLS ()H.264 和 MP4 版本的上传和流媒体。

我应该是：

1. 使用存储桶 URL 将视频从存储桶流式传输到客户端并让它处理发回的数据块？或者，
2. 从我的存储桶流式传输到我的服务器，然后流式传输到我的前端，并由服务器管理发送回块？服务器发回一个 .m3u8 文件，然后将其余文件作为 .ts 块发送。

我的服务器最初根据标头中的范围以块的形式发送 mp4 文件。现在 .m3u8 文件已经分解为 .ts 块。

我在网上找到了一个可以让您查看前端代码的人，我可以看出客户端对 .m3u8 文件发出了一个请求，然后在网络选项卡中也发送回了一系列 .ts 块。所以我无法判断服务器正在做什么来制作这些块。

我可能对存储桶的真正工作原理也有点困惑，但那是另一个问题。

前端代码是非常基本的 React 设置，这就是调用视频所需的全部内容：

const playerRef = useRef<HTMLVideoElement>(null);

const [hlsUrl, setHlsUrl] = useState(
    'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
);

return (
    <ReactHlsPlayer
      playerRef={playerRef}
      src={hlsUrl}
      autoPlay={true}
      controls={false}
      width='60%'
      height='auto'
    />
)

我尝试通过同一系统发送它以发回 mp4，但它发送了 m3u8，然后无法发送 .ts 文件

如果还不太清楚，我很想问人们如何设置一台服务器来将流、hls 和存储桶集成在一起？

我不需要代码，只需要指导。

Answer 1

HLS 的主要目的是它允许您使用常规 Web 服务器作为直播流服务器。

媒体被分成几个部分。 客户端请求一个播放列表（M3U8 格式），该播放列表将其指向媒体段（MP4/ISOBMFF 或 TS）。

客户端下载播放列表以查看其需要哪些媒体片段。 然后它会下载这些片段并将它们重新组装成流以进行播放。

因为整个协议都是围绕文件展开的，所以除了服务这些文件之外，Web 服务器不需要任何特殊的东西。 因此，兼容 S3 的存储桶变成了快速且肮脏的流媒体服务器。 您只需将播放列表和片段上传到其中，客户端就可以从中下载。 然后，当您扩大规模时，您可以将任何普通的基于 HTTP 的 CDN 放在该存储桶前面，以轻松有效地将我们的分段中继到边缘。

我应该是：

1. 使用存储桶 URL 将视频从存储桶流式传输到客户端并让它处理发回的数据块？或者，

是的。 将您的段文件推送到存储桶，并让客户端直接连接到存储桶。 不要让你的 Node.js 应用服务器参与到这一边，没有必要。

我确实想解决其他问题，尽管你的问题不太清楚。

我的服务器最初根据标头中的范围以块的形式发送 mp4 文件。

这甚至比您的 HLS 版本更好！ 你为什么不这样做呢？

您的媒体已预先录制。 您没有提供多层编码或类似的东西。 因此，使用 HLS 而不是仅仅流式传输 MP4 文件对您来说“零好处”。 事实上，因为您将其转换为 HLS，所以实际上有点损害了您的兼容性。 S3 已经可以处理远程请求。 浏览器客户端已经知道如何请求您需要的范围。 您不需要转换为 HLS。 只需将文件放在服务器上即可完成！

如果您在传输原始 MP4 时遇到问题，您可能只需要调整 moov 原子的位置：

ffmpeg -i original.mp4 -c copy -movflags faststart optimized.mp4