websocket - 如何通过 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 游戏中工作几个月前。我没想到在原始答案发布这么长时间后会起床，我想我应该编辑这篇文章以提供更多帮助。顺便说一句，我不是专业人士，这篇文章只是基于我使用 MediaSource 的经验。应用程序接口(interface)。欢迎评论纠正我。谢谢!

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

buf创建后，我想 buf预计 fragmented MP4每次 SourceBuffer.appendBuffer 时的数据块叫做。

然而你通过了 RAW H264 我认为浏览器应该给你一个异常(exception)的数据。

就我而言，我使用了 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
}

[原答案]

您可以查看此项目 131/h264-live-player在 GitHub 上，它基于 mbebenita/Broadway ，一个 JavaScript H.264 解码器。
node server-static.js的例子通过 WebSocket 流式传输原始 h264 视频，客户端代码将其呈现在 Canvas 中。 Git克隆那个repo，按照安装说明，把你的h264文件放在 samples中文件夹，修改 video_path到您的视频文件 server-static.js#L28 ，执行 node server-static.js您将在浏览器中看到播放的视频。

请注意，百老汇只能与 合作。基线 轮廓。