Question

我见过的大多数websocket示例都使用mp4或wbem容器数据。以下是一些示例javascript客户端代码：

var ms = new MediaSource();
...
var buf = ms.addSourceBuffer('video/mp4; codecs="avc1.64001E"');

就我而言，我的服务器发送原始h264数据（仅限视频，无音频）。由于我的数据没有mp4 / avc容器，我想知道为addSourceBuffer().定义参数的正确方法是什么？我只是省略video/mp4标签如下？问候。

var buf = ms.addSourceBuffer('codecs="avc1.64001E"');

Answer 1

几个月前，我参与了基于MediaSource的h264游戏。在原始答案之后的这么长时间之后，我没想到会起床，我想我应该编辑这篇文章更有帮助。 BTW我不是专业人士，这篇文章仅基于我使用MediaSource API的经验。欢迎评论以纠正我。谢谢！

var buf = ms.addSourceBuffer('video/mp4; codecs="avc1.64001E"');

创建buf后，我认为buf每次调用fragmented MP4时都会SourceBuffer.appendBuffer数据块。

然而，您已将 RAW H264 数据传递给它，我认为浏览器应该为您提供例外。

就我而言，我使用ffmpeg从RTSP流中读取数据，将数据转换为fMP4格式（无编码）并将输出发送到stdout然后让其他应用程序发送数据到浏览器。（事实上，我使用过WebSocket。）

以下是参数：

ffmpeg -i rtsp://example.com/ -an -c:v copy -f mp4 \
       -movflags +frag_keyframe+empty_moov+default_base_moof pipe:1

我想再分享一件事。我不确定ffmpeg的工作原理，但每次从stdout读取时都不会输出完整的片段。所以在我的后端程序中，我首先缓存了数据。这是Java中的伪代码：

byte[] oldbuf;
byte[] buffer = ReadDataFromFfmpegStdout();
if (buffer[4] == 'm' && buffer[5] == 'o' && buffer[6] == 'o' && buffer[7]) {
    send(oldbuf);            // the old buffer is a completed fragment now
    oldbuf = buffer;
} else {
    append(oldbuf, buffer);  // append data to the old buffer
}

[原始答案]

您可以在GitHub上查看此项目131/h264-live-player，它基于mbebenita/Broadway，一个JavaScript H.264解码器。

node server-static.js的示例通过WebSocket传输原始h264视频，客户端代码在画布中呈现它。 Git克隆那个repo，按照安装说明，将h264文件放在samples文件夹中，将video_path修改为server-static.js#L28中的视频文件，执行node server-static.js然后你将查看浏览器中播放的视频。

请注意，百老汇只能使用基线个人资料。

如何使用websocket的h264直播流？

1 个答案: