Your browser doesn't support SharedArrayBuffer

[purpleidea]

From: https://ffmpegwasm.github.io/#demo

Using Firefox 81.02 on Fedora 32.

Your browser doesn't support SharedArrayBuffer, thus ffmpeg.wasm cannot execute. Please use latest version of Chromium or any other browser supports SharedArrayBuffer.

[jeromewu]

This is an expected result as Firefox doesn't have the full support for SharedArrayBuffer now.

[Ian321]

Doesn't it? MDN says it requires crossOriginIsolated to be true.

After some research I have concluded that the headers necessary for this can't be set via

<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin" />
<meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp" />

and you can't set headers on https://github.io directly.

[jeromewu]

So do you mean that if I set up my own server, it is possible to run ffmpeg.wasm in Firefox 81+?

[Ian321]

Should work.

I just tested it with the following and it worked:

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

app.use((req, res, next) => {
  res.header('Cross-Origin-Opener-Policy', 'same-origin');
  res.header('Cross-Origin-Embedder-Policy', 'require-corp');
  next();
});

app.use(express.static('build'));

app.listen(8080);

The downside it that you can't use scripts hosted on other domains,
so Google Analytics won't work and ffmpeg-core can't be loaded from https://unpkg.com/.

[thijstriemstra]

I just tested it with the following and it worked:

Thanks for sharing, also worked here on customization of webpack-dev-server:

module.exports = {
    mode: 'development',
    devServer: {
        // webpack-dev-server middleware
        before(app) {
            // ========================================================
            // use proper headers for SharedArrayBuffer on Firefox
            // see https://github.com/ffmpegwasm/ffmpeg.wasm/issues/102
            // ========================================================
            app.use((req, res, next) => {
                res.header('Cross-Origin-Opener-Policy', 'same-origin');
                res.header('Cross-Origin-Embedder-Policy', 'require-corp');
                next();
            });

            // etc..

[ivanburlakov]

Setting headers both in index.html and in express server, like was mentioned above, made my app work on Firefox Desktop. But on Chrome Mobile 88+, which should support SharedArrayBuffer - https://www.chromestatus.com/feature/5171863141482496 - it infinitely loads (I have a check for existence of SharedArrayBuffer, so it means it does exist). But on the same Chrome Mobile 88, this version made for Firefox loads ok - http://ffmpegwasm.et.r.appspot.com/ . So what am I missing?

[thijstriemstra]

The header issue in Firefox is also coming to Chrome: https://blog.chromium.org/2021/02/restriction-on-sharedarraybuffers.html

[Zophiel]

Would this work combined with Content Security Policies?