react 找不到 ffmpegwasm

Question

我正在尝试在浏览器中使用 React js 创建 ffmpeg wasm 的工作示例。

我一直在遵循这个非常简单的例子： https://www.youtube.com/watch?v=-OTc0Ki7Sv0&ab_channel=Fireship

在我的 React repo node_modules 中本地安装了 ffmpeg，如下所示：

然后按照教程视频编辑 App.jsx，使其看起来像这样：

import React, { useState, useEffect } from 'react';
import './App.css';

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
const ffmpeg = createFFmpeg({
  log: true,
});
function App() {
  
  const [ready, setReady] = useState(false);

  const load = async () => {
      console.log('load()')
      await ffmpeg.load();
      setReady(true);
  }

  useEffect(()=>{
    load();
  }, [])

  return (
    <div className="App">
      content
    </div>
  );
}

export default App;

但这会导致我的 win10 命令提示符终端出现错误消息，说找不到 ffmpeg 文件：

[16:07:47] [snowpack] [404] Not Found (/node_modules/@ffmpeg/core/dist/ffmpeg-core.js)
[16:07:47] [snowpack] [404] Not Found (/node_modules/@ffmpeg/core/dist/ffmpeg-core.wasm)
[16:07:47] [snowpack] [404] Not Found (/node_modules/@ffmpeg/core/dist/ffmpeg-core.worker.js)

我什至尝试将 ffmpeg 文件移动到我的公共文件夹并编辑代码以找到它们，如下所示：

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

但是同样的错误发生了。为什么我的 React App.jsx 文件无法正确找到我的 node_modules 文件夹中的 ffmpeg 文件？

Answer 1

将提到的依赖项降级到下面给出的版本

“依赖关系”：{ "@ffmpeg/core": "^0.9.0", "@ffmpeg/ffmpeg": "^0.9.8", },