Screen goes black on ios 14.4 or bellow.

[emaireZaiko]

Hello silvermine team, I am not sure if the issue is directly related to this package but the error happened in it so I will post here.

First let me introduce our self a bit first, I am working for a company that offers a streaming service for live events or vod, we are using videojs as our player. Recently we updated our packages and the @silvermine/videojs-chromecast bumped from 1.3.3 to 1.3.4 and this is when our problem started to happen.

Here is the issue we faced after the update:

On iOS 14.4 and bellow the screen want black when our users tried to watch the video on their browser (mobile safari)(we could reproduce this error on multiple device and simulator on iOS version 14.4, 14.3, 14.2. 14.1, 14.0, 13.7, 13.7, 13.4, 13.2, 12.4), this issue did not happen before our packages update and after some research we determine that the package creating the issue where the error happened was the @silvermine/videojs-chromecast. Here is the message we could see on the debug console:

and here is the line in question we think the problem is happening on based on the error message upper message: https://github.com/silvermine/videojs-chromecast/pull/98/files#diff-9cc9d8498386e0f22d69108e99e3f97036cb75c8ba9def4fac79d7f9c5de802aR49

We are using videojs and multiple other addon packages for it, let me share with you the current packages we are using related to videojs:

"@silvermine/videojs-chromecast": "1.3.3", "@videojs/http-streaming": "2.14.3", "@videojs/vhs-utils": "3.0.5", "@videojs/xhr": "2.6.0", "video.js": "7.20.3", "videojs-contrib-quality-levels": "2.2.0", "videojs-font": "3.2.0", "videojs-hls-quality-selector": "1.1.4", "videojs-seek-buttons": "2.2.1", "videojs-vtt.js": "0.15.4", "aes-decrypter": "3.1.3", "m3u8-parser": "4.7.1", "mpd-parser": "0.21.1", "@babel/runtime": "7.19.0",

As you can see we are using babel, not sure if it is relevant to share this info but we thought it could be in this situation.

Here is an example of the issue happening (simulated in this order 14.5, 14.0, 13.7, 13.6):

It is important to note that this issue was only happening on iOS as far as we know, we could no reproduce this behaviour on android, PC or mac.

[kontrollanten]

Hi! The PR you linked to are introduced in 1.3.4, and I see you're using 1.3.3. I think that 1.3.4 may solve your issue. Can you bump version and see if it works?

[emaireZaiko]

Sorry I took the screenshot after I rolled back due to this error but we were on 1.3.4 when it happened, 1.3.3 is working perfectly so we had to roll back in our system. Here how the setting were at the issue discovery time:

[kontrollanten]

Thanks. That's strange. babel is reading the browserslist file to determine which browsers should be supported with polyfills.

When running npx browserslist in the repo it gives:

...
ios_saf 15.4
ios_saf 15.2-15.3
ios_saf 15.0-15.1
ios_saf 14.5-14.8
ios_saf 14.0-14.4
ios_saf 13.4-13.7
ios_saf 13.3
ios_saf 12.2-12.5
ios_saf 11.0-11.2
ios_saf 10.3
ios_saf 9.3
...

Not sure why it doesn't work as intended.

[kontrollanten]

Okay, I get it. You're using import ... 'videojs-chromecast' which means that you have to do the polyfills. You've to use @babel/preset-env to get the accurate polyfills. Here you can see an example which solve the issue for you https://babeljs.io/docs/en/babel-preset-env#browserslist-integration

[emaireZaiko]

Hi,

Thank you for your reply, so I checked you answer and tried it but I still face the same problem. Let me share with you what I have atm:

how I include your package into my vue (we are using vuejs):

<script>
    import videojs from 'video.js';
    import 'videojs-contrib-quality-levels';
    import videojsqualityselector from 'videojs-hls-quality-selector';
    require('@silvermine/videojs-chromecast')(videojs, { preloadWebComponents: true });
******

Also we were already using babel with the "@babel/preset-env" but I tried to update with the link you gave me and it look like this now:

{
    "plugins": ["@babel/transform-runtime", "@babel/plugin-syntax-dynamic-import", "@babel/plugin-proposal-class-properties"],
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "entry",
                "corejs": "3.22",
                "targets": {
                    "esmodules": true
                }
            }
        ]
    ]
}

and I added a browserslistrc like follow:

defaults
> 0.05%
not dead
not safari < 9
not ios < 9
not op_mini all
not android < 4.4
not ios_saf < 11

which result in this when I run npx browserslist

*******
ios_saf 15.6
ios_saf 15.5
ios_saf 15.4
ios_saf 15.2-15.3
ios_saf 15.0-15.1
ios_saf 14.5-14.8
ios_saf 14.0-14.4
ios_saf 13.4-13.7
ios_saf 12.2-12.5
*******

please let me know if there is any other info that might help or if I missed something.

[kontrollanten]

Do you have any link to the repo so I can reproduce?

[emaireZaiko]

Sorry, this is my company's repo including all the code for our critical project so I do not have the authorization to share it, I might be able to share some piece of code or configurations separately but not the entire repos, sorry again.

[yokuze]

@emaireZaiko I agree with @kontrollanten that this looks like a configuration issue with your repo and not an issue with @silvermine/videojs-chromecast.

It's difficult for generous folks like @kontrollanten to provide help without a codebase that reproduces the issue.

It can be helpful to try to reproduce the issue in a separate, minimal environment that's isolated from the complexity of your production application. Sometimes even the act of creating that MCVE shows you the issue without any outside help needed.

Others who have opened issues have chosen to use https://codesandbox.io/ to create their example since it's easy to spin up a shareable, reproducible environment/codebase there.

I'll close this for now, but if you find an issue with this plugin itself, feel free to comment here or open another issue.