如何将MediaRecorder生成的WebM Blob转换为MP4 Blob用于PPTXGenJS

浏览器原生没有直接的WebM转MP4 API，前端最可靠的实现方式是借助ffmpeg.wasm（WebAssembly版FFmpeg）完成转码，以下是具体步骤：

步骤1：安装依赖 #

通过npm安装ffmpeg.wasm核心包：

npm install @ffmpeg/ffmpeg @ffmpeg/core

纯前端项目可下载包内的dist文件到本地，直接引入脚本使用。

步骤2：实现转码函数 #

下面是完整的WebM转MP4逻辑，接收WebM Blob并返回MP4 Blob：

async function webmToMp4(webmBlob) {
  const { createFFmpeg, fetchFile } = FFmpeg;
  const ffmpeg = createFFmpeg({ log: false }); // 设为true可查看转码日志，调试用

  // 加载FFmpeg核心库（路径根据实际文件位置调整）
  await ffmpeg.load({
    coreURL: './node_modules/@ffmpeg/core/dist/ffmpeg-core.js'
  });

  // 将WebM Blob写入FFmpeg虚拟文件系统
  ffmpeg.FS('writeFile', 'input.webm', await fetchFile(webmBlob));

  // 执行转码命令：使用H.264视频编码+AAC音频编码（PPTX标准兼容格式）
  await ffmpeg.run(
    '-i', 'input.webm',
    '-c:v', 'libx264', '-crf', '23', '-preset', 'medium', // 视频编码参数，crf控制画质，preset控制速度
    '-c:a', 'aac', '-b:a', '128k', // 音频编码参数
    'output.mp4'
  );

  // 读取转码后的MP4文件并转为Blob
  const mp4Buffer = ffmpeg.FS('readFile', 'output.mp4').buffer;
  const mp4Blob = new Blob([mp4Buffer], { type: 'video/mp4' });

  // 清理虚拟文件系统资源
  ffmpeg.FS('unlink', 'input.webm');
  ffmpeg.FS('unlink', 'output.mp4');
  ffmpeg.exit();

  return mp4Blob;
}

步骤3：结合录制与PPT生成流程 #

示例完整流程：屏幕录制→转码→嵌入PPT：

// 启动屏幕录制
async function startScreenRecording() {
  const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
  const mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp9' });
  const chunks = [];

  mediaRecorder.ondataavailable = (e) => chunks.push(e.data);
  mediaRecorder.onstop = async () => {
    const webmBlob = new Blob(chunks, { type: 'video/webm' });
    // 转码为MP4
    const mp4Blob = await webmToMp4(webmBlob);
    // 生成带视频的PPT
    await generatePPT(mp4Blob);
  };

  mediaRecorder.start();
  // 示例：录制10秒后停止
  setTimeout(() => {
    mediaRecorder.stop();
    stream.getTracks().forEach(track => track.stop());
  }, 10000);
}

// 用PPTXGenJS生成嵌入视频的PPT
async function generatePPT(mp4Blob) {
  const pptx = new PptxGenJS();
  const slide = pptx.addSlide();

  // 将Blob转为ArrayBuffer（PPTXGenJS要求的格式）
  const videoBuffer = await mp4Blob.arrayBuffer();
  
  // 嵌入视频
  slide.addVideo({
    data: videoBuffer,
    x: 1, y: 1, w: 8, h: 5,
    poster: '' // 可选，设置视频封面图的Base64或URL
  });

  // 下载PPT文件
  pptx.writeFile({ fileName: 'screen-recording.pptx' });
}

关键注意事项 #

• 编码兼容性：必须使用libx264视频编码和aac音频编码，这是PPTX支持的MP4标准格式，否则嵌入后可能无法播放。
• 性能优化：转码会占用较多CPU资源，大文件转码建议提示用户等待；可调整preset参数（如fast）提升转码速度，牺牲少量画质。
• 路径配置：确保FFmpeg核心库的路径正确，避免加载失败；纯前端项目需将核心文件放在可访问的静态资源目录。

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