firefoxffmpegwebassemblysharedarraybuffer

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

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.

Solution

  • 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/