Getting error from @ffmpeg/core-wasm

[meikidd]

Describe the bug
Hi, thanks for your greate repo. I am trying to use @ffmpeg/core-wasm instead of @ffmpeg/core in your example /transcode.html. But I got the error

ffmpeg-core.js:27 Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'WorkerGlobalScope': Failed to parse URL from ffmpeg-core.wasm

To Reproduce
What I did is just changing this line into

corePath: '../../node_modules/@ffmpeg/core-wasm/ffmpeg-core.js',

and of course I have installed @ffmpeg/core-wasm beforehand.

I suspect it hasn't handle the wasm file url properly.

Please let me know if I did anything wrong.

PS: It takes around 30s to transcode a video(480p, 4s duration, 300KB+) from h265 to h264, but only takes around 2s using native ffmpeg. Not sure which part slows down the Webassembly module.

[jeromewu]

Hi @meikidd,
This error is why we don't use @ffmpeg/core-wasm as our default core, it is an issue I am surveying, but haven't got too much progress so far.

[tpetry]

@meikidd Thanks for the tip, manually changing the url did really help.

@jeromewu I looked at chrome's network panel and can say the standard ffmpeg.js core is not loaded, it's only loading the wasm core. But i still see the extrem slow transcoding process to h264 like @meikidd.

[grkblood13]

@tpetry manually changing the url to what?

[jeromewu]

In the latest version (0.9.3) of ffmpeg.wasm, we are using a separate ffmpeg-core.wasm file by default, so this issue is fixed. 🎉

[kirtirajsinh]

I'm getting an error : Uncaught (in promise) TypeError: Failed to fetch

I guess this is because the path is not set properly. here's my code :

`import React, { useCallback, useEffect, useState } from "react";
import { useDropzone } from "react-dropzone";
import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg";

const ffmpeg = createFFmpeg({
  log: true,
  corePath: "/node_modules/@ffmpeg/core/dist/ffmpeg-core.js",
});

const VidPrompt = () => {
  const [videos, setVideos] = useState(null);
  const [frames, setFrames] = useState([]);
  const [ready, setReady] = useState(false);

  const onDrop = useCallback((acceptedFiles) => {
    setVideos(
      acceptedFiles.map((file) =>
        Object.assign(file, {
          preview: URL.createObjectURL(file),
        })
      )
    );
  }, []);

  useEffect(() => {
    (async () => {
      await ffmpeg.load();
      setReady(true);
    })();
  }, []);

  useEffect(() => {
    return () => {
      videos?.forEach((file) => URL.revokeObjectURL(file.preview));
    };
  }, [videos]);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
  });

  const extractFrames = async (file) => {
    ffmpeg.FS("writeFile", "test.mp4", await fetchFile(file));
    await ffmpeg.run("-i", "test.mp4", "-vf", "fps=1", "out%d.png");
    const data = ffmpeg
      .FS("readdir", "/")
      .filter((item) => item.includes(".png"));
    setFrames(
      data.map((image) => {
        const data = ffmpeg.FS("readFile", image);
        const url = URL.createObjectURL(
          new Blob([data.buffer], { type: "image/png" })
        );
        return url;
      })
    );
  };

  useEffect(() => {
    if (ready && videos) {
      extractFrames(videos[0]);
    }
  }, [videos, ready]);

  return (
    <>
      {!videos && (
        <div
          {...getRootProps()}
          className="border-dashed border-2 border-red from-purple-400 py-32 px-32 flex flex-col justify-center items-center"
        >
          <input {...getInputProps()} />
          {isDragActive ? (
            <p>Drop the videos here ...</p>
          ) : (
            <p>Drag n drop some videos here, or click to select videos</p>
          )}
        </div>
      )}
      <div className="flex flex-row">
        {videos?.map((video, i) => (
          <div key={i}>
            <video src={video.preview} controls width="500" />
          </div>
        ))}
      </div>
      <div className="flex flex-row">
        {frames.map((frame, i) => (
          <div key={i}>
            <img src={frame} alt={`Frame ${i}`} />
          </div>
        ))}
      </div>
    </>
  );
};

export default VidPrompt;
`

without adding corepath to ffmpeg I'm getting the same error.