crash createFFmpeg.js:64

[iollllllloi]

Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined
createFFmpegCore 5aa0d9cb-82b7-b843-95f8-5e7cf39ad9f7:22
load createFFmpeg.js:64

[raldur]

What browser are you using? https://caniuse.com/sharedarraybuffer

[caugner]

What browser are you using? https://caniuse.com/sharedarraybuffer

Firefox – which has disabled SharedArrayBuffer as of January 2018 to mitigate Meltdown/Spectre.

[jaronwanderley]

ReferenceError: SharedArrayBuffer is not defined
    at 62450249-9a80-449e-a7a6-6435f7577039:22
    at Object.x [as load] (createFFmpeg.js:64)
    at async Proxy.c (App.vue:29)

I just tried the demo on https://ffmpegwasm.github.io/vue-app/

Using Chrome Version 92.0.4515.107 64 bits

[julienbeisel]

@jaronwanderley Is is still not working ?

I have no issue and I can't reproduce the bug.

[jaronwanderley]

@jaronwanderley Is is still not working ?

Yep, still there on https://ffmpegwasm.github.io/vue-app/ :
Linux chrome Version 92.0.4515.131 64 bits:

[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.

x @ createFFmpeg.js:64
async function (async)
x @ createFFmpeg.js:63
c @ App.vue:30
Object.onClick.t.<computed>.t.<computed> @ App.vue:7
Le @ runtime-core.esm-bundler.js:155
Me @ runtime-core.esm-bundler.js:164
n @ runtime-dom.esm-bundler.js:349

runtime-core.esm-bundler.js:226 ReferenceError: SharedArrayBuffer is not defined
    at e3d605f2-60a3-4eb9-9699-4aa599feb999:22
    at Object.x [as load] (createFFmpeg.js:64)
    at async Proxy.c (App.vue:29)

Windows Chrome Version 92.0.4515.131 32 bits:

RangeError: WebAssembly.Memory(): could not allocate memory
    at 671cddf1-1344-4e5b-9638-b3ec5eb11386:22
    at Object.x [as load] (createFFmpeg.js:64)
    at async Proxy.c (App.vue:29)

[julienbeisel]

You can try that on Linux :

• Quit any running instance of Chrome.
• Run your favorite terminal emulator.
• In the terminal, run commands like below

google-chrome --enable-features=SharedArrayBuffer

source (with mac & windows instructions as well) : https://web.dev/cross-origin-isolation-guide/

Ideally you'd have to set HTTP headers for cross origin isolation, my solution is just a fix for local development.

[cclaan]

Adding cross origin headers to the vue.config.js fixed this for me locally

const path = require('path');
const express = require('express');

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/vue-app/'
    : '/',
  configureWebpack: {
    devServer: {
      before: app => {
        app.use('/node_modules/', express.static(path.resolve(__dirname, 'node_modules')))
      },
      headers: { "Cross-Origin-Embedder-Policy" : "require-corp",
                  "Cross-Origin-Opener-Policy" : "same-origin" }
    }
  }
};

[BrunoQuaresma]

Is it only possible to make that work by setting the require-corp and same-origin headers?