CORS fails on Firefox

[NeoCoderMatrix86]

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".

How can this be fixed?

[sps014]

Hi,
I tested my sample site on Firefox, SharedArrayBuffer was main cultprit.
It turns out that the base Repo FFmpeg Wasm Sample had the same issue.

Can you please report there.
If it will be fixed there, it won't take long for me to fix it here as well.
Currently only Chromium doesn't enforce SharedArrayBuffer CORS header restriction , however this will also change in future.
The original issue is here.

[NeoCoderMatrix86]

Thanks for your investigation. I opened up ffmpegwasm/ffmpeg.wasm#166

In Blazor assemblies it is common that you include all javascript required in wwwroot, why not just use this?

[sps014]

Great suggestion,
I will definitely explore self host option in upcoming releases.

[NeoCoderMatrix86]

Just for your information: https://github.com/ffmpegwasm/ffmpeg.wasm is an experimental project. The CORS problem will be much greater in May, because Chrome (and therefore Edge because it is build on top of it) will drop support for SharedArrayBuffer. Having this in mind, I dropped this library out of my project in short term and will have a look for anther solution (production stable) in long term. As mentioned here ffmpegwasm/ffmpeg.wasm#166 (comment) maybe you can have a version with ffmpeg.js.

[sps014]

I don't think sharedArrayBuffer will be dropped any time soon , Blazor folks are using sharedArrayBuffer to implement multi threading in WASM.
I am experimenting in this branch.
Here is good article by Uno team explaining the changes in WASM in 2021.

[sps014]

Hey Netlify allows adding custom headers ,
Netlify is free , similar to Github pages.

Steps:

1. build this branch (https://github.com/sps014/FFmpegBlazor/tree/Self-Host).
2. add reference of ffmpeg library to your project
3. publish to netlify
4. add custom header
   Header set Cross-Origin-Opener-Policy: same-origin
Header set Cross-Origin-Embedder-Policy: require-corp
   to wasm route https://yourpage.com/_content/FFmpegBlazor/0.8.5/dist/ffmpeg-core.wasm
   replace yourpage.com to your netlify app address

[NeoCoderMatrix86]

Well, I'm currently not planning to move to Netlify. Maybe in future, but currently I'm facing to much bugs and need to fix them first. If the library works on all major browsers, I will defently use it, but currently it is to unstable for my approach. I will come here later and see how the next version performs :).

[Aloento]

This problem is even more significant today and I think it should be depreciated ffmpeg.wasm.