ffmpegwasm / ffmpeg.wasm

FFmpeg for browser, powered by WebAssembly
https://ffmpegwasm.netlify.app
MIT License
14.22k stars 831 forks source link

Nuxt framework project introduction of @ffmpeg/ffmpeg #566

Open yz0903 opened 1 year ago

yz0903 commented 1 year ago

code: import { createFFmpeg } from '@ffmpeg/ffmpeg'

I attempted to install the import in nuxt, but encountered an error. Vue-cli can create a project. I don't understand the reason

ERROR MESSAGE: Module parse failed: Unexpected token (29:51) friendly-errors 14:28:44
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | / From remote server/URL / | } else {

  const res = await fetch(new URL(_data, import.meta.url).href);

| data = await res.arrayBuffer(); | }

KenZync commented 1 year ago

you have to put ffmpeg-core.js and ffmpeg-core.wasm inside of public folder then call

  await ffmpeg.load({
    coreURL: await toBlobURL(`/ffmpeg-core.js`, "text/javascript"),
    wasmURL: await toBlobURL(`/ffmpeg-core.wasm`, "applicaiton/wasm"),
  });
  message.
KenZync commented 1 year ago

you can see my example nuxt here https://github.com/KenZync/ojn-viewer/commit/7076493b44b9f88d03582cde032144219de7f9f0#diff-2bebd757a3f74205945b3426d6e1a6c548edd5231d7e225b0d366abc287ee4f4