如何在 ReactJS 项目中使用 ffmpeg.js

Posted 2023-03-31

【中文标题】如何在 ReactJS 项目中使用 ffmpeg.js

【英文标题】：How to use ffmpeg.js in a ReactJS project

【发布时间】：2021-10-31 02:38:15

【问题描述】：

我的 react 应用正在使用 ffmpeg.wasm (https://github.com/ffmpegwasm/ffmpeg.wasm)，但由于 SharedArrayBuffer 的“近期”问题，我必须将项目移至 ffmpeg.js (https://github.com/Kagami/ffmpeg.js)。

这是我的问题。我安装了库 (npm i ffmpeg.js) 并尝试使用 github 页面上提供的简单代码供网络工作者测试它是否工作：

const worker = new Worker("ffmpeg-worker-webm.js");
worker.onmessage = function(e) 
  const msg = e.data;
  switch (msg.type) 
  case "ready":
    worker.postMessage(type: "run", arguments: ["-version"]);
    break;
  case "stdout":
    console.log(msg.data);
    break;
  case "stderr":
    console.log(msg.data);
    break;
  case "done":
    console.log(msg.data);
    break;
  
;

但是 onmessage 方法永远不会被调用，而是我得到了

GET https://localhost:3000/ffmpeg-worker-webm.js 403 (Forbidden)

我是 web worker 主题的新手，我找不到足够多的关于这个问题的文章来解决我的问题（事实上，大多数文章使用与我完全相同的代码，显然它适用于他们） .问题是 localhost 特定的还是 ReactJS 问题而我根本无法使用 ffmpeg.js 库？有人可以指导我如何解决这个问题吗？

【问题讨论】：

I found this which might help.

@Andy 感谢您的链接！我安装了库，它可以工作。但是，我需要研究代码并找到使其工作的部分，因为安装库会增加大量依赖项，而且库本身每周只有约 100 次下载，这对我来说是个大问题。如果您有其他可以帮助我的资源或提示它为什么起作用，请告诉我！

【参考方案1】：

似乎 /ffmpeg-worker-webm.js 不适用于您的 Web 服务器，如果您使用 webpack，请确保将其单独捆绑或使用 fileLoader，或者更改 new Worker("ffmpeg-worker-webm.js") 您在哪里期待这个文件是

还请记住，如果您想知道您的更改是否有效，在您的 Web 服务器中，访问 URL 中的 https://localhost:3000/ffmpeg-worker-webm.js 应该会为您提供代码而不是禁止回复