如何与Nuxt一起使用ffmpeg？

Question

我对Nuxt非常陌生，目前我正在尝试通过一个vue应用程序来生成gifs ffmpeg.wasm以使用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附带的默认dev服务器，当它构建和托管时，我将能够解决这个问题，但我也需要在本地使用它。

下面是我在赤骨Vue应用程序中使用的组件(回退但仍然会导致错误)。我使用的是节点14.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>

Answer 1

将实例创建为mounted()解决了这个问题。

这可能是因为ffmpeg需要已经在DOM中挂载Vue实例(按照它的工作方式)。

created()通常用于AJAX调用或与Vue实例不太相关的事情，在他们的榜样中使用复合API显示它给了我尝试mounted()钩子的想法。