CODEWITHSUNDEEP
javascriptreactjsffmpegweb-workerhttp-status-code-403
L3M0L
L3M0L

Reputation: 429

How to use ffmpeg.js in a ReactJS project

My react app is using ffmpeg.wasm (https://github.com/ffmpegwasm/ffmpeg.wasm) but because of the "recent" issues with SharedArrayBuffer I have to move the project to ffmpeg.js (https://github.com/Kagami/ffmpeg.js).

Here is my problem. I installed the library (npm i ffmpeg.js) and tried to use the simple code provided on the github page for the web workers to test if it's working:

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;
  }
};

but the onmessage method never get's called, instead I get

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

I'm new to the web worker topic and I could not find enough articles about this problem to wrap my head around (in fact, most of the articles use the exact same code as I do and apparently it works for them). Is the problem localhost specific or is it a ReactJS problem and I'm not able to use the ffmpeg.js library at all? Can someone guide me on how to solve this issue?

Upvotes: 1

Views: 3827

Answers (1)

Abdul Hamid
Abdul Hamid

Reputation: 208

it seems that /ffmpeg-worker-webm.js is not available for your web server, if you are using webpack make sure you bundle it separately or use a fileLoader, either that or change new Worker("ffmpeg-worker-webm.js") where are you expecting this file to be

also have in mind that if you want to know if your changes working, in your web server, accessing https://localhost:3000/ffmpeg-worker-webm.js in the URL should give you the code and not a forbidden response

Upvotes: 1

Related Questions