在浏览器中播放原始 h264 直播流答案

【问题标题】：Play raw h264 live stream in browser在浏览器中播放原始 h264 直播流
【发布时间】：2019-01-02 07:59:15
【问题描述】：

我正在寻找一种解决方案，通过 WebSocket 在浏览器上实时播放来自本机服务器的原始 h264 流。我在 JavaScript 中尝试了许多第三方 h264 解码器，每个解码器都有自己的问题。基于 Broadway 的解码器无法解码主要和高配置的 h264。其他解码器解码 1080p 帧太慢。我尝试在 JavaScript 中将原始 h264 转换为分段的 mp4，但在解码双向帧时播放非常难看。我也尝试过 webrtc，但似乎不可能在浏览器和本机服务器之间实现对等连接。有什么建议吗？

【问题讨论】：

您需要将 h.264 流混合到 MP4/ISO BMFF 容器中，然后使用 MediaSource 扩展来播放它。您提到您尝试过这个...您可以显示您尝试过的代码吗？
是的，我试过了。我用这个项目github.com/xevokk/h264-converter 来做复用。由于 chrome 解码器引用解码时间戳而不是表示时间戳来解码 b 帧，因此它在 chrome 中播放效果不佳。
Chrome 中的 MSE 可以很好地处理 b 帧（与 WebRTC 不同），您只需要在碎片化的 mp4 中提供合成时间。因此，无论您使用什么库进行复用，请确保设置组合时间，即表示和解码器时间戳之间的差异。
感谢@user1390208 的想法。你能推荐一个标准的多路复用库来正确处理 cts
@user1390208 by “不像WebRTC”，你的意思是WebRTC不处理b帧吗？ WebRTC 是否支持解码原始 h264 流？

标签： javascript html webrtc http-live-streaming live-streaming

【解决方案1】：

我见过的最好的（我自己没有亲身体验过）是https://github.com/samirkumardas/jmuxer

有一个如何通过 WebSockets 处理流数据的示例，位于 https://github.com/samirkumardas/jmuxer/blob/master/example/index-h264.html

var socketURL = 'ws://localhost:8080';
var jmuxer = new JMuxer({
    node: 'player',
    mode: 'video',
    flushingTime: 1000,
    fps: 30,
    debug: true
});
var ws = new WebSocket(socketURL);
ws.binaryType = 'arraybuffer';
ws.addEventListener('message',function(event) {
     jmuxer.feed({
         video: new Uint8Array(event.data)
     });
});
ws.addEventListener('error', function(e) {
    console.log('Socket Error');
});

【讨论】：