BlobBuilder is not defined at video.min.js:22 (7.21) on webos 6.x (emulator)

[dani3l3]

Description

Hi, I have a standalone/packaged web application that runs on webOS Smart TVs from LG, published on their content store, for my company's streaming service. It has been running with an old version (7.6) of videojs for a couple of years without major problems. But I would like to upgrade the package with something newer. I tried with 7.21.1 - which is what we are running on our website by now - but when running it in their emulator/debugger, it blows up

Uncaught ReferenceError: BlobBuilder is not defined
at video.min.js:22
at new (video.min.js:22)
at new e (video.min.js:26)
at e.t.src (video.min.js:26)
at Object.handleSource (video.min.js:26)
at s.r.setSource (video.min.js:20)
at o. (video.min.js:20)
at o.e.ready (video.min.js:12)
at o.e.techCall_ (video.min.js:20)
at o. (video.min.js:20)

it seems to be something they don't support in the browser engine/javascript interpreter?
Have you seen this before/are you aware of it?

Reduced test case

No response

Steps to reproduce

1. In a webOS web app, even just one anonymous page with the player
2. Load videojs.min.js as usual (css and js)
3. in your custom script instantiate the player
4. add an HLS stream as the source as
   player.src([{ type: 'application/x-mpegURL', src: 'https://fob.bar.site/vod/123456767/playlist.m3u8'}]);
5. see it blow up

Errors

Uncaught ReferenceError: BlobBuilder is not defined
at video.min.js:22
at new (video.min.js:22)
at new e (video.min.js:26)
at e.t.src (video.min.js:26)
at Object.handleSource (video.min.js:26)
at s.r.setSource (video.min.js:20)
at o. (video.min.js:20)
at o.e.ready (video.min.js:12)
at o.e.techCall_ (video.min.js:20)
at o. (video.min.js:20)

What version of Video.js are you using?

7.21.1

Video.js plugins used.

none

What browser(s) including version(s) does this occur with?

webOS

What OS(es) and version(s) does this occur with?

webOS

[video-archivist-bot]

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

• for https://fob.bar.site/vod/123456767/playlist.m3u8: say @video-archivist-bot save OEDgWA

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[dani3l3]

I understand it might be hard to reproduce due to the not very common platform. To develop on webOS, LG offers emulators and an IDE. If needed, I should be able to create a sample single-page app/project scaffold that shows/repros the symptom/behaviour (I can't share my production apps' code as it is too complex).

[mister-ben]

Perhaps it needs a Blob polyfill? BlobBuilder is only tried in the catch block in the worker polyfill. From line 44796 in https://unpkg.com/browse/video.js@7.21.1/dist/video.js

[dani3l3]

Thank you for your comment. It's possible that it would fix it - I am such a JS newbie 😅 I will try.... Is there any library in particular you would suggest for this? Caveats are that on those webOS apps is NOT possible to fetch anything from CDNs (everything has to be packaged in the app), and this is a very old-style project with just the bare minimum: a bunch of html, css and js files and a couple of libraries imported by hand (no package manager, no frameworks...)... this is intentional as some of those devices are very small machines with slow processors and little memory so the app doesn't bring a lot of bloat with it. Any advice would be appreciated 🙏

[dani3l3]

I did some experiments hooking up this one
https://github.com/bjornstar/blob-polyfill/blob/master/Blob.js
https://github.com/eligrey/Blob.js

(which required some refactoring in the way I was loading stuff, instruducing requireJS).

But it still errors the same way.

Here some console.log from which you should see that 'Blob' is 'native code' initially, but after Blob.js gets loaded it becomes an object - it's the one with Fire, FileReader, Blob in video.html:39.... and that Blob function within it again maps to 'native code'... so I guess this platform has some support for it and the polyfill returns the original object without replacing it?)... or am I loading it wrong?

Before loading blob support
video.html:23 Blob: function Blob() { [native code] }
video.html:29 after require main
main.js:32 Blob support loaded
main.js:33 Blob.Blob: function Blob() { [native code] }
main.js:39 VideoJS support loaded
main.js:40 Blob.Blob: function Blob() { [native code] }
main.js:41 VideoJS: function ir(e,t,i){if(r=ir.getPlayer(e))return t&&h.warn('Player "'+e+'" is already initialised. Options will not be applied.'),i&&r.ready(i),r;var n="string"==typeof e?Te("#"+tr(e)):e;if(!K(n))throw new TypeError("The element or ID supplied is not valid. (videojs)");n.ownerDocument.defaultView&&n.ownerDocument.body.contains(n)||h.warn("The element supplied is not included in the DOM"),!0===(t=t||{}).restoreEl&&(t.restoreEl=(n.parentNode&&n.parentNode.hasAttribute("data-vjs-player")?n.parentNode:n).cloneNode(!0)),a("beforesetup").forEach(function(e){e=e(n,lt(t));T(e)&&!Array.isArray(e)?t=lt(t,e):h.error("please return an object in beforesetup hooks")});var r=new(pt.getComponent("Player"))(n,t,i);return a("setup").forEach(function(e){return e(r)}),r}
video.html:38 after require video
video.html:39 Blob.Blob: function Blob() { [native code] }
video.js:34 init called
video.js:41 VideoId: 63cc13a148ab7
video.js:698 stream url: https://foobar.m3u8
videojs.min.js:12 VIDEOJS: ReferenceError: BlobBuilder is not defined
at videojs.min.js:22
at new (videojs.min.js:22)
at new e (videojs.min.js:26)
at e.t.src (videojs.min.js:26)
at Object.handleSource (videojs.min.js:26)
at s.r.setSource (videojs.min.js:20)
at o. (videojs.min.js:20)
at o.e.ready (videojs.min.js:12)
at o.e.techCall_ (videojs.min.js:20)
at o. (videojs.min.js:20)

---

I also tried this other approach https://stackoverflow.com/a/16545415/439475 but it also fails on these two guys he can't find WebKitBlobBuilder || MozBlobBuilder

I am at loss.

[video-archivist-bot]

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

• for https://foobar.m3u8: say @video-archivist-bot save WjynVw