如何在Websocket中使用h264实时流？

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剧本的制作。我没想到在原始答案这么长时间后就会起床，我想我应该编辑这篇文章以提供更多帮助。顺便说一句，我不是专业人士，这篇文章只是基于我使用MediaSourceAPI的经验。欢迎发表评论以纠正我。谢谢！

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

创建buf后，我认为每次调用时都会buf期望碎片化的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] == 'f') {
    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，该项目基于JavaScript H.264解码器mbebenita / Broadway。

该示例node server-static.js通过WebSocket流传输原始h264视频，并且客户端代码将其呈现在画布中。Git克隆该仓库，按照安装说明进行操作，将h264文件放入samples文件夹中，video_path在server-static.js＃L28中修改为视频文件，执行node server-static.js，您将在浏览器中看到播放的视频。

请注意，百老汇只能使用基线配置文件。