I use FFMPEG plugin with Vue3 and Vite. My code:
<script setup>
import { FFmpeg } from '@ffmpeg/ffmpeg'
import { fetchFile, toBlobURL } from '@ffmpeg/util'
import {onMounted} from "vue";
// const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm' // doc - vite
const baseURL = 'https://unpkg.com/@ffmpeg/core-mt@0.12.6/dist/esm' // example
const ffmpeg = new FFmpeg();
onMounted(() => {
initializeFfmpeg()
})
const initializeFfmpeg = async () => {
await ffmpeg.load()
}
</script>
but FFMPEG is not initialized correctly. the error occurs when I run the command:
await ffmpeg.load()
I get an error that may be related to vite:
I tried several import options, but I still get this error. please help me, thank you
package.json
"dependencies": {
"@ffmpeg/core": "^0.12.6",
"@ffmpeg/ffmpeg": "0.12.6",
"@ffmpeg/util": "^0.12.1",
"vue": "^3.4.21"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.4",
"vite": "^5.2.0"
}
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
optimizeDeps: {
exclude: ["@ffmpeg/ffmpeg", "@ffmpeg/util"],
},
server: {
headers: {
"Cross-Origin-Opener-Policy": "same-origin",
"Cross-Origin-Embedder-Policy": "require-corp",
},
},
})
node version:
v18.18.2
I try this too:
await ffmpeg.load({
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript')
})
You downgrade the vite version to 4.5.2
, then re-install.
it will work.
it fixed in old vite version but re-open in newest