TypeError: WorkerGlobalScope.fetch: [...] is not a valid URL.

Question

TypeError: WorkerGlobalScope.fetch: [...] is not a valid URL.

Closed this issue 3 years ago · 12 comments

I try to run the player but I'm getting the error TypeError: WorkerGlobalScope.fetch: ogv-decoder-audio-opus-wasm.wasm?version=1.8.1-20210218202802-404f536 is not a valid URL.

I'm loading the script via jsdelivr cdn like this

<!-- OGV webm support for safari -->
<script async="" src="https://cdn.jsdelivr.net/npm/ogv@latest/dist/ogv.js"></script>

// Do not work either
// OGVLoader.base = 'https://cdn.jsdelivr.net/npm/ogv@latest/dist'
const player = new OGVPlayer()
player.src = 'https://upload.wikimedia.org/wikipedia/commons/9/96/Curiosity%27s_Seven_Minutes_of_Terror.ogv'
player.play()

Anyone got the same issue?

Answer 1 · 2021-07-01T21:50:08.000Z

Is the file there on the server? Does it have the right type? Is it readable from the same web context?

Answer 2 · 2021-07-02T07:02:21.000Z

To be honest, I don't understand your questions.

Is the file there on the server?

I think so, this is just a CDN host for npm packages have look there it does not seems to miss things

Does it have the right type?

Hum 🤔 what would be a wrong type? Same as the previous point it is just a CDN host

Is it readable from the same web context?

Web context? Google "MDN WebContext" found Secure contexts and it is written that the workers are a feature that needs to work in secure context; it is also written that localhost for firefox is a trusted secure origin. So should I try to deploy somewhere for testing it?
EDIT: Even the code deploy to our dev hosting served under TLS it produce the same issue. Does it mean it can't be used from a CDN but must be served by the same origin?

I just created a CodePen it looks that everything is delivered in TLS so under secure context but it produces the same issue.

I really don't know what I'm doing wrong.

Answer 3 · 2021-07-02T13:07:40.000Z

I think so, this is just a CDN host for npm packages have look there it does not seems to miss things

I'm not familiar with your third-party CDN. Try copying the files to your server and using them directly.

Answer 4 · 2021-07-02T13:15:49.000Z

Ok in some testing I think the use of the CDN is breaking the ability to load the worker, so it's using a fallback code path using 'blob' URLs, and apparently that code path has bit-rotted as it no longer works. Neat!

Skip the CDN and use your own servers for now.

I plan to remove this old blob support anyway, it never really was reliable.

Answer 5 · 2021-07-02T13:47:15.000Z

Some background on why this bit is broken, since it's not clear without some context: ;)

Web Worker .js files must come from "same-origin" as the web page instantiating them (so can't be loaded from a CDN directly)
Browsers allow a hack-around which is that you can load a remote .js file cross-origin if allowed via fetch or XHR, then turn it into a "blob:" URL with URL.createObjectURL(), and load that into a Worker
However, the JS then needs to load the .wasm binary blob with the WebAssembly code
And that fails because the blob can't read the foreign CDN

It may be possible to fix up the load base address so the blob: URL worker can load the cross-origin .wasm file from the CDN, however, so I'm gonna take a quick look at that before I tear out the old code entirely. I think it's literally been broken for years though. ;)

Answer 6 · 2021-07-02T14:08:02.000Z

Fair enough, I could also deploy it along the rest of the app.
At the end I was using the CDN because I got troubles to setup webpack to copy the dist directory.
It would be nice if you could upgrade the readme for including a quick setup with webpack.
And also thank you for the explanations :)

Answer 7 · 2021-07-02T14:11:36.000Z

Honestly I'm not sure how best to use it with webpack currently, last I tried there were weird mess-ups with webpack trying to take over any use of .wasm files and it was extremely confusing. Will have to try it again some time with current stuff.

Answer 8 · 2021-07-02T14:12:29.000Z

"When I was young we just put files in a subdirectory and loaded them up! Uphill through the snow both ways!" ;) ;)

Answer 9 · 2021-07-02T16:23:54.000Z

Well I'll be

Got it working :D

Here's a sample that works for me in Firefox --

<!-- OGV webm support for safari -->
<script async="" src="https://cdn.jsdelivr.net/npm/ogv@1.8.4/dist/ogv.js"></script>


<button id=foo>Play</button>

<script>
    document.getElementById('foo').onclick = () => {
        OGVLoader.base = 'https://cdn.jsdelivr.net/npm/ogv@1.8.4/dist';
        const player = new OGVPlayer();
        document.body.appendChild(player);
        player.src = 'https://upload.wikimedia.org/wikipedia/commons/9/96/Curiosity%27s_Seven_Minutes_of_Terror.ogv';
        player.play();
    };
</script>

Thanks for the report, and I'm glad it was not too hard a fix after all. Let me know if you have any other problems! :D

Answer 10 · 2021-07-02T16:31:37.000Z

Wow super thank you for having solve it so fast, I'm gonna checkout this on safari desktop & mobile, will let you know :)

Answer 11 · 2021-07-02T16:43:43.000Z

I've updated my CodePen it works for firefox but does not work on safari (neither desktop nor mobile).
I've checked the console nothing shoes up and the canvas is there but nothing happen.
Do you think you could have a look on safari? Could safari not allowing blob url for workers?

EDIT: It did not work on chrome, I changed the code to your version and it worked on chrome, checking safari
EDIT2: It works 🎉 thank you so much 👍

Answer 12 · 2021-09-20T10:54:23.000Z

Hi @Brion I'm coming back because at the end in the past I did only test on safari desktop and we have issues on iPhone.

I was think first it was due to the player I used (video.js) but it seems to be connected to OGV.js. I cloned my first pen to include the two version.

Codepen link: https://codepen.io/Hideman85/pen/GRExVGN?editors=1010
Result only (needed if safari is below a certain version since the editor is blocked) https://codepen.io/Hideman85/full/GRExVGN

I do not own safari so I did test via browserstack.com they allow you to register freely and test any browser/device for 1min each and on safari you do have access to the devtool (if you are using chrome with that site) the error is related to a blob url internally to OGV.js

I would appreciate so much you have a quick look to that issue you will make my day :) and thank you in advance for your time ;)

EDIT: Looks to work on iPhone >= 8 but not 6
EDIT2: It looks to break if the iOS is older or equal to version 11, do you know what is the range of the support of your library?
EDIT3: My bad it is totally normal it is underlined by WebAssemby and it was introduced in iOS11 so that understandable:)