如何在Nuxt项目中使用ffmpeg.wasm？本地开发服务报错如何解决？

1. 调整Nuxt开发服务启动参数 #

你需要在启动Nuxt开发服务时给Node进程传入要求的实验性特性flag，直接修改项目package.json中的scripts配置即可：

• macOS/Linux环境直接修改dev命令：

{
  "scripts": {
    "dev": "NODE_OPTIONS=\"--experimental-wasm-threads --experimental-wasm-bulk-memory\" nuxt"
  }
}

• Windows环境修改为：

{
  "scripts": {
    "dev": "set NODE_OPTIONS=--experimental-wasm-threads --experimental-wasm-bulk-memory && nuxt"
  }
}

• 需跨平台兼容的话先安装cross-env依赖，再配置命令：

{
  "scripts": {
    "dev": "cross-env NODE_OPTIONS=\"--experimental-wasm-threads --experimental-wasm-bulk-memory\" nuxt"
  }
}

2. 调整FFmpeg初始化逻辑 #

Nuxt默认开启服务端渲染，created钩子会在服务端和客户端各执行一次，而ffmpeg.wasm仅能在浏览器环境运行，需要修改初始化时机避免服务端执行报错：

<template>
    <div class="home">
        <h1>FFMPEG test</h1>
    </div>
</template>

<script>
import { createFFmpeg } from '@ffmpeg/ffmpeg'

export default {
    name: 'Home',
    data: function () {
        return {
            ffmpeg: null,
        }
    },
    // 改用仅客户端执行的mounted钩子
    mounted() {
        this.ffmpeg = createFFmpeg({
            log: true,
        })
        this.loadFFmpeg()
    },
    methods: {
        async loadFFmpeg() {
            // 也可以额外加环境判断兜底
            if (process.client) {
                await this.ffmpeg.load()
            }
        },
    },
}
</script>

修改完成后重启开发服务即可解决报错问题。

内容的提问来源于stack exchange，提问作者Aidan Daniel