Javascript 使用Broadway.js解码原始h.264

我正在开发一个应用程序，它使用ffmpeg为我提供一个编码的h.264帧：

avcodec_encode_video2(c, &packet, frame, &got_output)

如果我将所有

packet.data

保存到out.h264文件中，它将使用

ffplay

显示所需的输出

现在，我的目标是在收到每个数据包时发送它，并在网页上显示它（实时流）。为此，我使用了

Broadway.js

我可以确认我从应用程序发送的数据在浏览器中正确接收。但是，我无法使用百老汇在webGL画布上显示相同的内容（

Player.js

，

Decoder.js

，

YUVCanvas.js

）：

我得到的输出是一个空白的白色画布

data

是一个

ArrayBuffer

，它包含从

avcodec\u encode\u video2

接收的数据包的h.264比特流。我做错什么了吗？数据是否应该采用特定的格式

旁注：
我的视频文件

out.h264

使用此处提供的示例正确播放：

---

它似乎使用命令行ffmpeg接口，并在接收到每个数据包时进行处理。我的程序使用ffmpeg库获取相同的数据包，我需要渲染这些数据包。有人能帮忙吗？

请记住，百老汇只处理使用CAVLC（哈夫曼编码）编码的基线配置文件，而忽略主配置文件或使用CABAC（算术编码）编码的任何内容。换句话说，百老汇只接受最容易解码的H.264流。当你的视频编码不正确时，可能会令人沮丧，因为你会患上可怕的黑屏综合症

BroadwayStream在服务器端使用ffmpeg对mp4文件进行解压，将其转换为原始H.264数据流。也就是说，它生成H.264网络访问层单元（NALU）序列

然后浏览器端发出整个数据流的声音，并将其传递给百老汇的

decode（）

方法。因此，

decode（）

总是获得完整的NALU序列，在任何特定的方法调用中都没有传递部分NALU

decode（）

不接受部分解析。（BroadwayStream巧妙地避开了这一点，将整个流都提供给它。）而且它既不采用mp4数据流，也不采用webm数据流，只采用解压后的H.264。如果你把它传递给我们，它就不起作用了——它只会忽略你给它的数据。因此，接受数据流的客户端js必须以某种方式将数据流分离为NALU，然后再将其传递给

decode（）

如果您的js接受MIME类型的MUX文件

video/webm；codecs=“avc1.42E01E”

您可以查看并找到对其进行解盒的方法。每个

数据

块都包含一个或多个完整的NALU，您可以将其传递到

decode（）

如果是

video/mp4；codecs=“avc1.42E01E”

fragmented MP4，您可以在

avcC

框中解除sps和pps项的装箱，然后在

mdat

框中解除装箱。每个项目都是一个或多个完整的NALU

---

如果您从服务器获取原始H.264流，您必须自己将其解析为NALUs。请记住，有两种方法可以分离NALU：数据包传输和字节流

decode（）

也接受，但您的解析器也必须接受。

找到解决方案了吗？我目前也面临着类似的问题。在我的例子中，broadway.js显示了一些东西，但它几乎无法识别为流的内容。虽然这是一个老问题，但我想添加这个答案，因为谁在为h264播放问题而挣扎。从过去几周以来，我一直在为同样的问题而挣扎，最后我做了一个mp4多路复用器。这里是回复：“记住百老汇只处理基线配置文件”为什么会这样，还有什么解决办法吗？如果你需要解码一个主配置文件视频流，百老汇的代码不会这么做。它是由一些开源Android代码编译而成的asm.js；这就是源代码所做的。你可以使用不同的解码器；许多平台都有一些硬件支持。但它不会有百老汇纯粹的网络优势。

if (data != null) player.decode(new Uint8Array(data));