WebSocket流式传输MP4视频无法播放问题及TS文件适配咨询

一、MP4流式播放失败排查要点 #

1. MP4文件结构问题 #

MP4默认将元数据（moov原子）放在文件末尾，客户端必须先获取元数据才能解码播放。如果服务器直接从文件起始位置分片发送，客户端先收到的是媒体数据（mdat原子），缺少元数据会导致无法解析。

• 解决：用ffmpeg -i input.mp4 -movflags faststart output.mp4将moov原子移到文件开头；或服务器先读取并发送moov原子，再发送媒体数据分片。

2. 分片传输逻辑问题 #

• 分片大小不合理：过大或过小的分片都会影响客户端解析，建议按64KB-1MB的区间设置分片，或遵循MP4的box结构分片。
• 数据顺序错乱：WebSocket本身保证有序，但服务器异步读取文件时可能出现顺序问题，需确保读取流的连续性，避免并发读取导致分片顺序错误。

3. 客户端处理逻辑错误 #

• 未使用MediaSource API：直接将接收的Blob赋值给video的src，只能等完整文件接收后才能播放，无法实现流式播放。必须通过MediaSource API组装媒体流。
• MIME类型错误：需指定匹配视频编码的MIME类型，例如video/mp4; codecs="avc1.4D401E, mp4a.40.2"，类型不匹配会导致解析失败。
• 二进制数据处理错误：客户端需设置ws.binaryType = 'arraybuffer'，确保接收的是原始二进制数据而非字符串。

4. 服务器传输编码问题 #

Node.js中需确保发送二进制Buffer时开启binary: true选项，示例：

ws.send(chunk, { binary: true });

若转成字符串发送，会导致数据损坏无法解析。

二、TS文件流式传输的修改点 #

TS（MPEG-TS）是天然流媒体格式，每个包固定188字节，无需调整文件结构，只需修改以下几点：

1. MIME类型调整 #

客户端MediaSource的MIME类型需改为TS对应的格式，示例：

sourceBuffer = mediaSource.addSourceBuffer('video/MP2T; codecs="avc1.4D401E, mp4a.40.2"');

需根据视频实际编码调整codecs参数。

2. 服务器分片逻辑 #

直接按固定大小（如64KB，或188的整数倍）读取TS文件分片发送即可，无需处理元数据前置，因为TS的元数据分散在各个包中。

3. 客户端处理 #

保持MediaSource API的使用逻辑，接收二进制数据后追加到SourceBuffer即可，注意尽量保证分片是完整的TS包集合，避免截断单个TS包。

内容的提问来源于stack exchange，提问作者s p