Search code examples
vue.jsffmpegvite

FFMPEG - await ffmpeg.load() - overlay.ts Uncaught ReferenceError: document is not defined


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: enter image description here enter image description here

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')
    })

Solution

  • 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