先说一句， 这玩意儿根本不是专业较大牛写的教程，写的人有可能连键盘都不认识， 基本上... 只是想把自己摸爬滚打的经验随手扔出来让搜索引擎看到点流量。

一、Safari 为毛不支持直接抓 video 标签的流？

盘它... Safari 老是说 “不支持 getUserMedia on media element”，其实就是不给你抓到 HLS 那种分片文件。Chrome、Firefox 能直接拿到 MediaStream，Safari 就摆个 “no”。所以只能绕道：先把 HLS 下载下来再用 FFmpeg在前端转码。

二、 准备工作岗位——装个 ffmpeg.wasm

下面这段代码是从 Github 上抄来的，别管它是不是最崭新，只要能跑就行。

注意：加载太缓慢的话能够在页面一打开就落实 loadFFMPEG，这样等用户点按钮的时候已经在后台悄悄下载完了。

三、 抓取 HLS 分片并拼接

话说回来.…. 这里用了最蠢的办法——直接 fetch m3u8 列表，然后循环 fetch 各个 .ts 文件，用 ArrayBuffer 拼起来。代码里没做错误沉重试，也没检查 CORS，反正 Demo 用得着。

async function downloadHLS {
  const resp = await fetch;
  const txt = await resp.text;
  const base = url.substring + 1);
  const tsUrls = txt.split
    .filter)
    .map);
  let allData = new Uint8Array;
  for  {
    const r = await fetch;
    const buf = new Uint8Array);
    // 简洁拼接
    let tmp = new Uint8Array;
    tmp.set; tmp.set;
    allData = tmp;
    console.log;
  }
  return allData;
}

上面那段代码如果遇到 CORS 错误会直接报错，你能够自己去改成 Proxy 或者后端中转。

四、 采用 ffmpeg.wasm 把 ts 合成 MP4

我满足了。 下面这段命令总体来说是官方文档里复制来的：

await ffmpeg.FS);
await ffmpeg.run('-i', 'input.ts',
                 '-c:v', 'copy',
                 '-c:a', 'copy',
                 '-bsf:a', 'aac_adtstoasc',
                 'output.mp4');
const data = ffmpeg.FS;
const blob = new Blob;
const url = URL.createObjectURL;
document.getElementById.src = url;

记住在 Safari 上必须要要用户交互才能创建 Blob 下载链接，否则会被拦截，实际上...。

较小技巧：全局只保存一个 ffmpeg 实例

为了省内存， 你能够把 ffmpeg 实例放在全局变量里只加载一次：

let globalFFMPEG = null;
async function getFFMPEG {
   if  {
       globalFFMPEG = createFFmpeg;
       await globalFFMPEG.load;
   }
   return globalFFMPEG;
}

五、完整 Demo

站在你的角度想... 下面是一段能够直接 copy-paste 到本地 html 文件里跑的 Demo。别怪我没提醒你，这玩意儿在较低配机器上会卡死几分钟。

启动下载并转码

六、 常见坑 & 垃圾提示

• SharedArrayBuffer 必须要开启：Safari 要求页面通过 COOP+COEP 才能采用 SharedArrayBuffer，否则 ffmpeg.wasm 会直接报错。
• 内存泄漏：每次 run 后一定要删除临时文件：ffmpeg.FS;ffmpeg.FS;
• CORS：M3U8 所在服务器如果没有跨域头，会引起 fetch 被阻止。最省事的办法就是自己搭个 Nginx 做反向代理。
• 文件较大较小约束：Safari 对 Blob 较大较小有点奇怪， 较大于 ~500MB 的时候会卡死甚至崩溃，尽量控制在几百 MB 以下。
• 加载速度缓慢：w​asm 文件体积约20 MB，提议用 CDN 加速或拆分 core 与 worker 两一部分加载。

七、 社区现成项目推荐

走捷径。 如果你实在不想自己写那一些乱七八糟的代码，能够直接抄下面几个开源项目：

• : 包含了抓取 canvas 帧并喂给 FFMEG 的示例。
• : 有现成的 HLS 下载+合并脚本。
• : 虽然最主要是录屏，但里面也演示了 MediaRecorder 与 WASM 配合采用的方法。

八、——别指望这篇文章有更多专业，只能算是“随手写”版攻略了！

要想在 Safari 把 HTML 视频流弄成 MP4，仅有靠谱的方法就是先把分片下载下来再让 WebAssembly 编译良好的 FFmpeg 在前端干活。过程麻烦、代码烂、性能一般，但省了后端投入成本，也算是一条“土路”。如果你对性能有要求或者想做商业活动产品， 请考虑走服务端转码路线；如果只是测试或者学习了解，那就较大胆 copy‑paste 我上面的 Demo 吧！祝良好运~ 🚀🚀🚀，内卷...

交学费了。 本文纯属个人随笔，如有侵权请联系删除。关键词：Safari 视频捕获、WASM FFmpeg、HLS 下载、前端转码、js .