CORS fails on Firefox

[NeoCoderMatrix86]

Describe the bug
On Firefox I can not use the library because of bad CORS:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://unpkg.com/@ffmpeg/ffmpeg@0.9.7/dist/ffmpeg.min.js. (Grund: CORS-Anfrage schlug fehl).

Modul-Quell-URI ist in diesem Dokument nicht erlaubt: "https://unpkg.com/@ffmpeg/ffmpeg@0.9.7/dist/ffmpeg.min.js".

Also the example https://codepen.io/jeromewu/pen/NWWaMeY can not be used on FireFox

How can this be fixed?

Desktop (please complete the following information):

• OS: Windows 10
• Browser FireFox
• Version 86

[NeoCoderMatrix86]

No possible suggestion here?!

[1Syler]

It can be made to run on Firefox by enabling SSL and adding these header to the server response:

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

https://developer.chrome.com/blog/enabling-shared-array-buffer/

[NeoCoderMatrix86]

Ok, thanks for the answer. How do I add these headers? I'm not hosting the library at https://unpkg.com/@ffmpeg/ffmpeg@0.9.7/dist/ffmpeg.min.js I'm just consuming it (or better said, the 3rd party library I use).

[AndrewDubya]

Notes:

1. Those headers need to be added to your local webserver (eg in Apache or nginx).
2. Once you add them, you won't be able to include scripts from unpkg.com.
3. Chrome will have the same requirements starting in May of this year.

Since I couldn't find a local distribution, I had to take a few steps to create one:

• Download https://unpkg.com/@ffmpeg/ffmpeg@0.9.6/dist/ffmpeg.min.js locally
• Edited the file and replaced the string https://unpkg.com/@ffmpeg/core with ./
• Made a directory called 0.8.5 and moved ffmpeg.min.js into it.
• Made 0.8.5/dist/ and retrieved 3 linked files into it:
  https://unpkg.com/@ffmpeg/core@0.8.5/dist/ffmpeg-core.js
  https://unpkg.com/@ffmpeg/core@0.8.5/dist/ffmpeg-core.worker.js
  https://unpkg.com/@ffmpeg/core@0.8.5/dist/ffmpeg-core.wasm

The .wasm file is 25mb, which makes the resulting directory pretty big for serving.

[NeoCoderMatrix86]

Thanks for your contribution @AndrewDubya. I also thought of a "local" package and include this. Following your sample, I can get the loading of the library to run. But now the problem with the SharedArrayBuffer comes up. Since I'm hosting my project on github pages, I have no access to the server and can not add the headers. I'm trying to find out, what I can do next, in order to use the library.

[AndrewDubya]

Ah right, I missed the GitHub pages part. This is a "bleeding edge" project, so I think you're just out of luck for now.

There's also ffmpeg.js. I don't know much about it, except that it's slower and single-threaded, but you'll probably have more luck with it if it supports the codecs and stuff you need.

[NeoCoderMatrix86]

I see, thanks for your support. I missed the part "experimental" and thought the library is production stable. So for now, I will just remove all references since the Bug is hard and in long term search for a production stable library for recoding audio data.

[TrueCarry]

@AndrewDubya @NeoCoderMatrix86 I've found interesting thing. You only need to put ffmpeg.min.js on your domain and include it with crossorigin. Then it can download core and wasm from unpkg without a problem and still use shared buffers.

[AndrewDubya]

@NeoCoderMatrix86 just to be clear, that's how I interpreted the project status, I'm not a maintainer, just an excited user haha

@TrueCarry Wow I'll give that a try! It'd be nice to save some bandwidth haha. I wonder if browsers will want to deny that later, or if it's working as intended.

[AndrewDubya]

@TrueCarry Hmm, I'm not having any luck with that.

ffmpeg.min.js | 200 | script | (index)
ffmpeg-core.worker.js | 200 | fetch
ffmpeg-core.js | (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep)View Headers | script | ffmpeg.min.js:1 | 0 B | 12 ms

So I tried adding a script tag for the core with crossorigin, but then saw this error:
Error: SecurityError: Failed to construct 'Worker': Script at 'https://unpkg.com/@ffmpeg/core@0.8.4/dist/ffmpeg-core.worker.js' cannot be accessed from origin 'https://...'.

[MattMan569]

I can confirm that after setting the headers

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

and setting up ssl on my server that ffmpeg.wasm now works as expected.

[TrueCarry]

@TrueCarry Hmm, I'm not having any luck with that.

ffmpeg.min.js | 200 | script | (index)
ffmpeg-core.worker.js | 200 | fetch
ffmpeg-core.js | (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep)View Headers | script | ffmpeg.min.js:1 | 0 B | 12 ms

So I tried adding a script tag for the core with crossorigin, but then saw this error:
Error: SecurityError: Failed to construct 'Worker': Script at 'unpkg.com/@ffmpeg/core@0.8.4/dist/ffmpeg-core.worker.js' cannot be accessed from origin 'https://...'.

https://steam.design/converter/
https://github.com/sapic/sapic/blob/master/src/components/pages/converter/index.vue#L230
you can try to check out my working thing.