如何用JavaScript在客户端将FLV/HLS流转换为MP4并下载？

核心思路 #

客户端直接处理视频格式转换，得用WebAssembly版的转码工具，最常用的是ffmpeg.wasm——它能在浏览器里调用FFmpeg的转码能力。你原来的代码只是直接拉取原文件，要实现转码后下载，得调整流程：先获取媒体文件，再转码，最后生成MP4下载链接。

实现步骤 #

• 引入ffmpeg.wasm依赖
  引入WebAssembly版本的FFmpeg库（ffmpeg.wasm），可以通过项目依赖安装或直接引入其编译后的脚本文件。

• 替换原下载逻辑为转码下载
  把原来的downloadFile函数替换成以下逻辑，实现拉取、转码、下载全流程：

  const { createFFmpeg, fetchFile } = FFmpeg;
  const ffmpeg = createFFmpeg({ log: true });
  
  async function transcodeAndDownload(url) {
    // 初始化FFmpeg实例
    await ffmpeg.load();
    
    // 拉取远程FLV/HLS文件到虚拟文件系统
    const inputFileName = url.split('/').pop();
    ffmpeg.FS('writeFile', inputFileName, await fetchFile(url));
    
    // 执行转码命令：FLV转MP4（HLS流需额外参数）
    await ffmpeg.run('-i', inputFileName, 'output.mp4');
    
    // 读取转码后的MP4文件
    const data = ffmpeg.FS('readFile', 'output.mp4');
    
    // 创建下载链接并触发下载
    const link = document.createElement('a');
    link.href = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
    link.download = inputFileName.replace(/\.[^/.]+$/, '.mp4');
    document.body.appendChild(link);
    link.click();
    
    // 清理资源，避免内存泄漏
    URL.revokeObjectURL(link.href);
    document.body.removeChild(link);
    ffmpeg.FS('unlink', inputFileName);
    ffmpeg.FS('unlink', 'output.mp4');
  }
  
  // 调用示例
  const url = 'https://getsamplefiles.com/download/flv/sample-1.flv';
  transcodeAndDownload(url);
  

关键注意点 #

• HLS流特殊处理：如果处理的是HLS（.m3u8）直播流，需要给FFmpeg添加允许加载外部资源的参数，转码命令改成：

  await ffmpeg.run('-allowed_extensions', 'ALL', '-i', inputFileName, 'output.mp4');
  

• 性能限制：客户端转码非常消耗浏览器性能，低配置设备可能出现卡顿甚至崩溃，建议只在桌面端或高性能设备上使用。
• 跨域问题：确保CDN上的媒体文件配置了CORS跨域允许，否则无法通过浏览器拉取文件进行转码。
• 直播流实时性说明：如果是实时直播流，上述方法只能处理已下载的片段，无法做到真正的实时转码下载。若要捕获实时直播流，可结合MediaRecorder API：先通过video元素加载直播流，再捕获video的媒体流并保存为MP4，但MediaRecorder对输出编码格式有要求，部分浏览器可能只支持特定编码。

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