Node.js中如何为Blob生成的MP4文件添加Moov原子？

问题背景 #

你通过客户端传递的buffer生成MP4文件后，无法用video标签远程播放，核心原因是Moov原子不在文件开头（客户端录制的MP4通常把Moov放在末尾）。以下是纯Node.js实现的解决方案，无需依赖FFmpeg等第三方库。

实现思路 #

MP4的Moov原子存储视频元数据（时长、分辨率等），流式播放要求它在文件最前面。我们可以直接解析MP4的二进制结构，提取Moov原子并调整位置，重新拼接文件。

具体代码实现 #

1. 编写Moov原子移动函数

function moveMoovToStart(buffer) {
  let offset = 0;
  const atoms = [];

  // 遍历解析MP4所有原子
  while (offset < buffer.length) {
    const size = buffer.readUInt32BE(offset);
    const type = buffer.toString('ascii', offset + 4, offset + 8);
    atoms.push({ size, type, start: offset });
    offset += size;
  }

  // 定位关键原子：ftyp（文件类型）、moov（元数据）、mdat（媒体数据）
  const ftyp = atoms.find(a => a.type === 'ftyp');
  const moov = atoms.find(a => a.type === 'moov');
  const mdat = atoms.find(a => a.type === 'mdat');

  if (!ftyp || !moov || !mdat) {
    throw new Error('MP4结构不完整，缺少ftyp/moov/mdat原子');
  }

  // 重新拼接buffer：ftyp -> moov -> mdat
  return Buffer.concat([
    buffer.slice(ftyp.start, ftyp.start + ftyp.size),
    buffer.slice(moov.start, moov.start + moov.size),
    buffer.slice(mdat.start, mdat.start + mdat.size)
  ]);
}

2. 修改原保存函数

将生成的buffer先经过Moov调整，再写入文件：

const fs = require('fs');

async function saveIntoMp4(format) {
  if (chunks.length) {
    const options = recOptions.mimeType ? { type: recOptions.mimeType } : { type: "video/mp4" }
    let blob = new Blob(chunks, options);
    if (blob.size > 9999) {
      console.log(`blob.size`, blob.size);
      try {
        const buffer = Buffer.from(await blob.arrayBuffer());
        // 调整Moov原子位置
        const fixedBuffer = moveMoovToStart(buffer);
        fs.writeFileSync(`${__dirname}/videos/1.mp4`, fixedBuffer);
        console.log("video saved!");
      } catch (err) {
        console.error('视频处理或保存失败:', err);
      }
    }
  }
}

注意事项 #

• 该方法仅适用于标准结构的H.264编码MP4，如果文件包含free等额外原子，需要扩展解析逻辑。
• 如果Moov原子完全缺失，说明客户端录制的MP4不完整，需检查MediaRecorder的配置（确保录制完成后正确停止并输出完整数据）。
• 若处理大文件，建议改用fs.writeFile异步方法，避免阻塞主线程。

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