How to use ffmpeg.wasm in Firefox without getting the SharedArrayBuffer?

Question

I'm trying to load ffmpeg.wasm in a react app to do a small video converter project. The code is working fine on chrome, but in firefox dev edition (83.0b) I catch the following error:

ReferenceError: SharedArrayBuffer is not defined

Here's the part of the component where the error is catched (the variable ready is never becomes true):

import React, { useState, useEffect } from 'react'
import styles from './App.module.css'
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'
const ffmpeg = createFFmpeg({ log: true })

function App() {
  // load state
  const [ready, setReady] = useState(false)
  // files state
  const [video, setVideo] = useState('')
  const [gif, setGif]   = useState()
  // UI state
  const [dragOver, setDragOver ] = useState(false)
  const [nOfEnters, setNOfEnters] = useState(0)

  const load = async () => {
    try {
      await ffmpeg.load()
      setReady(true)
    } catch(error) {
      console.log(error)
    }
  }

  useEffect(() => {
    load()
  }, [])

Thanks in advance, let me know if I should've provided any more detail.

Answer 1

Try adding these headers in the server response:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

You can find some details here: https://web.dev/coop-coep/

Answer 2

Adding the headers was only part of the solution for me.

First in Apache I needed to enable mod_header

sudo a2enmod headers

Then I could set the headers in mysite.conf file

Header set Cross-Origin-Opener-Policy: same-origin
Header set Cross-Origin-Embedder-Policy: require-corp

I was still getting the error after this though and needed to create an SSL certificate and setup Apache for HTTPS.

Generate SSL certificate

sudo mkdir /etc/apache2/ssl
sudo openssl req -x509 -nodes -days 1095 -newkey rsa:2048 -out /etc/apache2/ssl/server.crt -keyout /etc/apache2/ssl/server.key

Set up Apachce

sudo a2enmod ssl
sudo ln -s /etc/apache2/sites-available/default-ssl.conf /etc/apache2/sites-enabled/000-default-ssl.conf

Then edit the 000-default-ssl.conf file

SSLCertificateFile    /etc/apache2/ssl/server.crt
SSLCertificateKeyFile /etc/apache2/ssl/server.key

https://hallard.me/enable-ssl-for-apache-server-in-5-minutes/