search

ffmpegwasm / ffmpeg.wasm

FFmpeg for browser, powered by WebAssembly
https://ffmpegwasm.netlify.app
MIT License
14.45k stars 851 forks source link

CORS fails on Firefox #166

Open NeoCoderMatrix86 opened 3 years ago

NeoCoderMatrix86 commented 3 years ago

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):

NeoCoderMatrix86 commented 3 years ago

No possible suggestion here?!

1Syler commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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:

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

NeoCoderMatrix86 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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. image

AndrewDubya commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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