Hls.js: Safari green artifacts in some streams

[Maryarty]

Environment

• [x] The stream has correct Access-Control-Allow-Origin headers (CORS)
• [x] There are no network errors such as 404s in the browser console when trying to play the stream
• [x] The issue observed is not already reported by searching on Github under https://github.com/dailymotion/hls.js/issues
• [x] The issue occurs in the latest reference client on http://dailymotion.github.io/hls.js/demo and not just on my page
• Link to playable M3U8 file: http://www.2sharenl.com:8081/lolli/master.m3u8
• Hls.js version: latest from https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"
• Browser name/version: Версия 10.0.1
• OS name/version: macOS Sierra 10.12.1

Steps to reproduce

1. Please provide clear steps to reproduce your problem
   Just use link to playable M#U* file in demo page.
2. Whenever possible, share a demo/example page which reproduces the problem you are having with the least amount of code possible.
3. If the bug is intermittent, give a rough frequency if possible

Expected behavior

What you expected to happen
Normal Video playing without green artifacts in Safari

Actual behavior

What actually happened
Only in Safari green area in the right side of video.

Console output

Paste the contents of the browser console here.

For media errors reported on Chrome browser, please also paste the output of chrome://media-internals 

[blacktrash]

Yes, we get these too - basically see #9 - the situation has improved a lot, but it's not the finished article yet.

[coolheinze]

@mangui could this be related to non-square pixels?

We get something like this:

Note: Chrome/Firefox play just fine.

[mangui]

@coolheinze nice hint
I checked http://www.2sharenl.com:8081/lolli/master.m3u8
and SAR ratio is 16/11
https://github.com/dailymotion/hls.js/blob/master/src/demux/exp-golomb.js#L266

maybe width/height needs to be signalled differently in that case

[coolheinze]

That's certainly not impossible. Since the video itself looks just fine, it could be that just cropping the video would do the trick.

[mangui]

Hi @jernoble !
I am pinging you as we are suspecting that hls.js is not signalling non-square pixels appropriately.
as you could see above, we have green pixels on Safari when playing streams with non square pixels.
How are we supposed to signal it to Safari to avoid green pixels on the right side of the video ?
I checked ISO14496-12 and pasp/clap box are mentioned. is it the way to go ?

Best,
Mangui

[mangui]

@Maryarty @coolheinze @jernoble, issue now fixed thanks to pasp box
http://dailymotion.github.io/hls.js/demo/?src=http%3A%2F%2Fwww.2sharenl.com%3A8081%2Flolli%2Fmaster.m3u8&enableStreaming=true&autoRecoverError=true&enableWorker=true&levelCapping=-1&defaultAudioCodec=undefined

[rayfoss]

In Safari 11.0.2 specifically, this got a lot worse. 11.0.1 and 10.x didn't have a problem with my videos. Now they look like this:

If I figure out a workaround I'll update

Update:
Heads up to anyone who runs into this... Safari 11.0.2 / metal seems to have broken bitstream switching after the spectre patches causing green shrunken video.