如何在 Nuxt 中使用 ffmpeg？答案

【问题标题】：How to use ffmpeg with Nuxt?如何在 Nuxt 中使用 ffmpeg？
【发布时间】：2021-11-03 18:49:09
【问题描述】：

我是 Nuxt 的超级新手，我目前正在尝试迁移一个生成 gif ffmpeg.wasm 的 vue 应用程序以使用 Nuxt.js。但是，每当我访问该页面时，服务器就会崩溃并出现以下错误：

[fferr] requested a shared WebAssembly.Memory but the returned buffer is not a SharedArrayBuffer, indicating that while the browser has SharedArrayBuffer it does not have WebAssembly threads support - you may need to set a flag                                                 18:36:38
(on node you may need: --experimental-wasm-threads --experimental-wasm-bulk-memory and also use a recent version)

我知道它说要向节点添加标志，就像 ffmpeg.wasm 文档一样，但是我如何通过 Nuxt 做到这一点？或者我什至可以这样做吗？它使用的是 Nuxt 附带的默认开发服务器，我将能够在构建和托管它时解决这个问题，但我也需要在本地拥有它。

这是我在我的准系统 Vue 应用程序中使用的组件（已剥离但仍会导致错误）。我正在使用节点 v14.17.6，我正在使用这个库 github.com/ffmpegwasm/ffmpeg.wasm/blob/master/README.md

<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,
        }
    },
    created() {
        this.ffmpeg = createFFmpeg({
            log: true,
        })
        // Initialise loadFFmpeg
        this.loadFFmpeg()
    },
    methods: {
        async loadFFmpeg() {
            await this.ffmpeg.load()
        },
    },
}
</script>

【问题讨论】：

您好，您的节点版本是多少？您是否有潜在的错误代码或某些配置要分享？
@kissu 我正在使用 v14.17.6，我正在使用这个库 github.com/ffmpegwasm/ffmpeg.wasm/blob/master/README.md 刚刚导入，我已经用我在准系统 vue 应用程序中使用的代码更新了原始问题
看看这个Vue3 example，看起来至少这是可行的。您是否尝试在mounted() 中完成所有操作？此外，由于这需要仅在客户端上可用，因此可以尝试将其包装在 <client-only> 标记内，如下所示：nuxtjs.org/docs/2.x/features/…
@kissu 你是个巫师！它现在似乎在mounted（）中工作，我显然知道这是在创建后调用的，更进一步，但是你知道为什么这会修复它吗？谢谢！

标签： javascript node.js vue.js nuxt.js

【解决方案1】：

将实例创建为 mounted() 解决了该问题。
这可能是因为 ffmpeg 需要 Vue 实例已经安装在 DOM 中（以它的工作方式）。
created() 通常用于 AJAX 调用或与 Vue 无关的事情例如，它与 their example 中的 Composition API 一起显示给了我尝试 mounted() 钩子的想法。

【讨论】：