如何使用 MSE 在视频标签中播放 H.264 NAL 单元流？答案

【问题标题】：How do I play a stream of H.264 NAL units in a video tag with MSE?如何使用 MSE 在视频标签中播放 H.264 NAL 单元流？
【发布时间】：2016-10-19 09:34:43
【问题描述】：

情况很简单；我正在通过 WebSockets 接收 NAL 单元流。如何使用 MSE 将它们输入 HTML5 视频标签？

研究表明我应该将数据混合到一个碎片化的 mp4 中，但我还没有找到任何关于如何实现这一点的细节。有人有具体的吗？

【问题讨论】：

你能重现 NAL 单元的示例流吗？
我不明白你的问题。
你能在 plnkr plnkr.co 重现 NAL 单元的接收流吗？ NAL 单元是否以ArrayBuffer 形式接收？另见stackoverflow.com/questions/38081377/…
我不认为我可以很容易地复制一个例子；我从私人服务器接收它们。是的，我将它们放在 ArrayBuffer 中，从一个 blob 中解析出来。编辑：该链接仅演示接收 mp4 数据并播放它。我正在接收 h.264 数据，我需要将其混合到 mp4（或其他东西）中才能播放。
"parsed out of a blob" 您是否尝试过从Blob 创建一个Blob URL 以设置为<video> src？见stackoverflow.com/questions/22157623/…

标签： javascript html video-streaming h.264 media-source

【解决方案1】：

如果您收到流数据，例如hls、nalu h.264...等等，您可以将其转换并复用成碎片化的 mp4。设置 HTML5 视频标签与 MSE 相结合，如创建 mediaSource、mediaSource.addSourceBuffer、sourceBuffer.appendBuffer。这将在 fmp4 正确输入缓冲区时播放视频。

您可以查看https://github.com/ChihChengYang/wfs.js，它演示了从 websocket 转换 NALu h.264 流。这直接在标准 HTML5 元素和 MSE 之上工作。

【讨论】：