Enable SharedArrayBuffer on localhost

Question

I keep getting a 'SharedArrayBuffer is not defined' error when trying to run ffmpeg.wasm. It appears this is on the Webassembly side. Regardless, I know this is an issue that can be overcome with Cross Origin Isolation. However, I'm trying to run it on a local host, which from what I understand Cross Origin Isolation wouldn't help. I tried following the instructions at the bottom of this guide but to no avail. I've also tried an approach of changing the Chrome//flags but that didn't work either. I just need to be able to run ffmpeg/wasm in the browswer but having a bit of trouble. Any thoughts?

I'm the author of [the guide at web.dev](https://web.dev/cross-origin-isolation-guide/#:~:text=--enable-features%3Dsharedarraybuffer). I'm interested how it didn't work for you. Can you tell me in more details? — agektmr, Jan 06 '22 at 02:45

score 2 · Answer 1 · answered Dec 30 '21 at 19:55

The localhost server should provide the required response headers:

$ curl -I http://localhost/

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

This server script provides a baseline test for SharedArrayBuffer availability:

// $ node server.mjs

import { createServer } from 'http'

createServer((request, response) => {
  response.writeHead(200, {
    'Content-Type': 'text/html; charset=utf8',
    'Cross-Origin-Opener-Policy': 'same-origin',
    'Cross-Origin-Embedder-Policy': 'require-corp',
  })
  response.write(`<script>
    document.write(window.SharedArrayBuffer
      ? '✅ SAB available'
      : '❌ SAB unavailable'
    )
  </script>`)
  response.end()
}).listen(80)

score 0 · Answer 2 · answered Dec 31 '21 at 14:16

You can make a page cross-origin isolated by serving the page with these response headers:

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

If you use NGINX as proxy, you just add the following code to the location block where you want to add the header::

location some-location {
  add_header "Cross-Origin-Opener-Policy" "same-origin";
  add_header "Cross-Origin-Embedder-Policy" "require-corp";     
}

Or more simpler, you can use token from this page to enable SharedArrayBuffer without requiring the page to be cross-origin isolated. However, it has an expiration date.

In your web page, you only need to add following tag into tag

<head>
    <meta http-equiv="origin-trial" content="{token}">
</head>

And if you use NGINX, please add header

add_header Origin-Trial {token};

Enable SharedArrayBuffer on localhost

2 Answers2

Linked