如何将h264 live stream与websocket一起使用？

我看到的大多数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"');

---

几个月前，我根据MediaSource制作了一部h264剧本。我没想到在得到最初的答案这么长时间后，我会站起来，我想我应该编辑这篇文章，让它更有帮助。顺便说一句，我不是专业人士，这篇文章只是基于我使用

MediaSource

API的经验。欢迎大家指正。谢谢

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

创建buf之后，我认为

buf

每次调用时都需要数据块

然而，您向它传递了原始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上签出这个项目，GitHub基于JavaScript H.264解码器

节点服务器static.js

的示例在WebSocket上传输一个原始h264视频，客户端代码在画布中呈现它。Git克隆该repo，按照安装说明操作，将h264文件放入

samples

文件夹中，将

video\u路径修改为中的视频文件，执行
node server static.js
，您将在浏览器中看到播放的视频

请注意，百老汇只能使用基线配置文件。
几个月前，我根据
MediaSource
制作了一部h264剧。我没想到在得到最初的答案这么长时间后，我会站起来，我想我应该编辑这篇文章，让它更有帮助。顺便说一句，我不是专业人士，这篇文章只是基于我使用
MediaSource
API的经验。欢迎大家指正。谢谢

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

创建buf之后，我认为
buf
每次调用时都需要数据块

然而，您向它传递了原始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上签出这个项目，GitHub基于JavaScript H.264解码器

节点服务器static.js
的示例在WebSocket上传输一个原始h264视频，客户端代码在画布中呈现它。Git克隆该repo，按照安装说明操作，将h264文件放入
samples
文件夹中，将
video\u路径修改为中的视频文件，执行
node server static.js
，您将在浏览器中看到播放的视频

请注意，百老汇只能使用基线配置文件。
AFAIK，必须对此流进行预处理。请阅读webtorrent.io源文件以查找执行此操作的组件…您是否找到解决方案？好的，必须对此流进行预处理。请阅读webtorrent.io源文件，找到可以这样做的组件…你有没有找到解决方案？“百老汇只能使用基线配置文件。”-这使得该库非常有用。我正在尝试做与OP相同的事情，我对你的伪代码有点迷茫。
readdatafromfmpegstout（）
是否读取固定数量的字节？这个大小是如何确定的？@GuruPrasad否，从
ffmpeg
的stdout读取的字节数不是固定的。但它可以通过查看开头来告诉您它是否是一个新片段，这就是为什么我检查是否找到了
moof
。（哦，我在我写的
moov
的
if
块中犯了一个错误，请检查fMP4的解释）。事实上，我不知道应该初始化多少字节，这就是为什么我没有在伪代码中编写它。在我的项目中，我假设每次从
ffmpeg
读取的字节数都小于5MB。“百老汇只能使用基线配置文件。”-这使得该库非常有用。我正在尝试做与OP相同的事情，我对你的伪代码有点迷茫。
readdatafromfmpegstout（）
是否读取固定数量的字节？这个大小是如何确定的？@GuruPrasad否，从
ffmpeg
的stdout读取的字节数不是固定的。但它可以通过查看开头来告诉您它是否是一个新片段，这就是为什么我检查是否找到了
moof
。（哦，我在我写的
moov
的
if
块中犯了一个错误，请检查fMP4的解释）。事实上，我不知道应该初始化多少字节，这就是为什么我没有在伪代码中编写它。在我的项目中，我假设每次从
ffmpeg
读取的字节数都小于5MB。