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

【问题标题】：How to use ffmpeg.js in a ReactJS project如何在 ReactJS 项目中使用 ffmpeg.js
【发布时间】：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 次下载，这对我来说是个大问题。如果您有其他可以帮助我的资源或提示它为什么起作用，请告诉我！

标签： javascript reactjs ffmpeg web-worker http-status-code-403

【解决方案1】：

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

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

【讨论】：