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?
-
Did you sort this out?anthumchris– anthumchris2022-01-05 18:48:51 +00:00Commented Jan 5, 2022 at 18:48
-
1I'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?agektmr– agektmr2022-01-06 02:45:18 +00:00Commented Jan 6, 2022 at 2:45
Add a comment
|
2 Answers
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)
Comments
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};
