Enable SharedArrayBuffer on localhost

Asked 30/12, 2021 at 19:10 Answered 31/12, 2021 at 14:16

javascript ffmpeg webassembly arraybuffer sharedarraybuffer

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?

Fordham answered 30/12, 2021 at 19:10 Comment(2)

Did you sort this out? – Rainier 5/1, 2022 at 18:48

I'm the author of the guide at web.dev. I'm interested how it didn't work for you. Can you tell me in more details? – Blondy 6/1, 2022 at 2:45

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)

Rainier answered 30/12, 2021 at 19:55 Comment(0)

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};

Garboard answered 31/12, 2021 at 14:16 Comment(0)

Recommended topics

Hot tags