Hls.js: Green artifacts when using hls.js on latest Chrome Mac OS X

[radiantmediaplayer]

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: https://playback.drntruhs.in:8443/vod/_definst_/mp4:NTR36271d/permanent/playback/2/dlink-20160908205503.mp4/playlist.m3u8
• Hls.js version: 0.5.44 and 0.6.2-6
• Browser name/version: Chrome 53 64-bit
• OS name/version: Mac OS X 10.11.6

Steps to reproduce

Go into sample page for hls.js http://dailymotion.github.io/hls.js/demo/ with latest Chrome on latest Mac OS X. Load the above HLS feed.
See the green artifacts in the upper part of the video.

Expected behavior

It should not be green. VLC plays this HLS feed without issue. JW player also does play this HLS stream without issue on the same browser/OS (http://demo.jwplayer.com/stream-tester/)

Actual behavior

Green artifacts. I undertsand those are likely decoding artifacts provided by the OS or the browser. Actually this stream plays fine in Windows 10 latest Chrome or Canary. But I wonder why other player can play it without issue while hls.js fails. Is there a setting that can help fix this issue? Is there something to investiagte further?

Console output

rmp.min.js:10 RMP: cssReady
rmp.min.js:10 RMP: player DOM and CSS ready
rmp.min.js:11 RMP: resize - new dimension: 640x360
rmp.min.js:10 RMP: player ready in 64 ms
rmp.min.js:8 RMP-cast: initializeCastApi
rmp.min.js:8 RMP-cast: init success
rmp.min.js:8 unavailable
rmp.min.js:10 RMP: click event on container
rmp.min.js:10 RMP: HTML5 playback requested
rmp.min.js:12 RMP: HLSJS create hls.js instance
rmp-hls.debug.js:8788[log] > attachMedia
rmp.min.js:12 RMP: HLSJS loading source manifest now
rmp-hls.debug.js:8788[log] > loadSource:https://playback.drntruhs.in:8443/vod/_definst_/mp4:NTR36271d/permanent/playback/2/dlink-20160908205503.mp4/playlist.m3u8
rmp-hls.debug.js:8788[log] > trigger BUFFER_RESET
rmp.min.js:10 RMP: HTML5 loadstart event
rmp-hls.debug.js:8788[log] > media source opened
rmp-hls.debug.js:8788 [log] > manifest loaded,1 level(s) found, first bitrate:2028411
rmp-hls.debug.js:8788 [log] > startLoad
rmp-hls.debug.js:8788 [log] > demuxing in webworker
rmp-hls.debug.js:8788 [log] > switching to level 0
rmp-hls.debug.js:8788 [log] > (re)loading playlist for level 0
rmp.min.js:12 RMP: HLSJS manifest parsed
rmp.min.js:12 RMP: abr hls.js ready
rmp.min.js:10 RMP: HTML5 play event
rmp.min.js:10 RMP: HTML5 waiting event
rmp-hls.debug.js:8788 [log] > level 0 loaded [0,21],duration:216.176
rmp-hls.debug.js:8788 [log] > Loading 0 of [0 ,21],level 0, currentTime:0,bufferEnd:0.000
rmp.min.js:10 RMP: HTML5 stalled event
rmp-hls.debug.js:8788 [log] > Loaded  0 of level 0
rmp-hls.debug.js:8788 [log] > Demuxing 0 of [0 ,21],level 0, cc 0
rmp-hls.debug.js:8788 [log] > creating sourceBuffer with mimeType:audio/mp4;codecs=mp4a.40.2
rmp-hls.debug.js:8788 [log] > creating sourceBuffer with mimeType:video/mp4;codecs=avc1.42001f
rmp-hls.debug.js:8788 [log] > track:audio,container:audio/mp4,codecs[level/parsed]=[mp4a.40.2/mp4a.40.5]
rmp-hls.debug.js:8788 [log] > track:video,container:video/mp4,codecs[level/parsed]=[avc1.42001f/avc1.42c01f]
rmp.min.js:10 RMP: HTML5 durationchange event - 216.175986
rmp.min.js:10 RMP: HTML5 loadedmetadata event
rmp-hls.debug.js:8788 [log] > parsed video,PTS:[0.000,9.999],DTS:[0.000/9.999],nb:305,dropped:0
rmp-hls.debug.js:8788 [log] > parsed audio,PTS:[0.000,10.008],DTS:[0.000/10.008],nb:431,dropped:0
rmp-hls.debug.js:8788 [log] > media buffered : [0,9.994754]
rmp-hls.debug.js:8788 [log] > Loading 1 of [0 ,21],level 0, currentTime:10.007800453514703,bufferEnd:10.008
rmp.min.js:10 RMP: HTML5 loadeddata event
rmp.min.js:10 RMP: HTML5 canplay event
rmp.min.js:10 RMP: HTML5 playing event
rmp.min.js:10 RMP: HTML5 canplaythrough event
8rmp.min.js:10 RMP: timeupdate
rmp.min.js:10 RMP: HTML5 stalled event
7rmp.min.js:10 RMP: timeupdate
rmp-hls.debug.js:8788 [log] > Loaded  1 of level 0
rmp-hls.debug.js:8788 [log] > Demuxing 1 of [0 ,21],level 0, cc 0
rmp-hls.debug.js:8788 [log] > parsed video,PTS:[10.000,19.999],DTS:[9.999/19.999],nb:304,dropped:0
rmp-hls.debug.js:8788 [log] > parsed audio,PTS:[10.008,20.016],DTS:[10.008/20.016],nb:431,dropped:0
rmp-hls.debug.js:8788 [log] > media buffered : [0,19.994621]
rmp-hls.debug.js:8788 [log] > Loading 2 of [0 ,21],level 0, currentTime:5.800772,bufferEnd:19.995
7rmp.min.js:10 RMP: timeupdate
rmp.min.js:10 RMP: HTML5 stalled event
3rmp.min.js:10 RMP: timeupdate
rmp-hls.debug.js:8788 [log] > Loaded  2 of level 0
rmp-hls.debug.js:8788 [log] > Demuxing 2 of [0 ,21],level 0, cc 0
rmp-hls.debug.js:8788 [log] > parsed video,PTS:[20.000,29.999],DTS:[19.999/29.999],nb:305,dropped:0
rmp-hls.debug.js:8788 [log] > parsed audio,PTS:[20.016,30.023],DTS:[20.016/30.023],nb:431,dropped:0
rmp-hls.debug.js:8788 [log] > media buffered : [0,29.994665]
rmp-hls.debug.js:8788 [log] > Loading 3 of [0 ,21],level 0, currentTime:10.410702,bufferEnd:29.995
7rmp.min.js:10 RMP: timeupdate
rmp.min.js:10 RMP: HTML5 stalled event
5rmp.min.js:10 RMP: timeupdate
rmp-hls.debug.js:8788 [log] > Loaded  3 of level 0
rmp-hls.debug.js:8788 [log] > Demuxing 3 of [0 ,21],level 0, cc 0
rmp-hls.debug.js:8788 [log] > parsed video,PTS:[30.000,39.999],DTS:[29.999/39.999],nb:302,dropped:0
rmp-hls.debug.js:8788 [log] > parsed audio,PTS:[30.023,40.008],DTS:[30.023/40.008],nb:430,dropped:0
rmp-hls.debug.js:8788 [log] > media buffered : [0,39.994532]
rmp-hls.debug.js:8788 [log] > Loading 4 of [0 ,21],level 0, currentTime:15.292343,bufferEnd:39.995
8rmp.min.js:10 RMP: timeupdate
rmp.min.js:10 RMP: HTML5 stalled event
3rmp.min.js:10 RMP: timeupdate
rmp.min.js:10 RMP: HTML5 playback requested
rmp.min.js:10 RMP: timeupdate
rmp.min.js:10 RMP: HTML5 pause event

[cpeterso]

I see garbled video in Firefox 51, Chrome 53, and Safari on OS X 10.11.6.

http://dailymotion.github.io/hls.js/demo/?src=https%3A%2F%2Fplayback.drntruhs.in%3A8443%2Fvod%2F_definst_%2Fmp4%3ANTR36271d%2Fpermanent%2Fplayback%2F2%2Fdlink-20160908205503.mp4%2Fplaylist.m3u8&enableStreaming=true&autoRecoverError=true&enableWorker=true&levelCapping=-1&defaultAudioCodec=undefined

[blacktrash]

I can repro in my browsers too. The stream seems ok; the only difference compared to streams which work in the same browsers is that display aspect ratio and average frame rate are not explicitly defined:

ffprobe -v error -select_streams V -show_entries \
stream=display_aspect_ratio,r_frame_rate,avg_frame_rate \
'https://playback.drntruhs.in:8443/vod/_definst_/mp4:NTR36271d/permanent/playback/2/dlink-20160908205503.mp4/playlist.m3u8'
[PROGRAM]
[STREAM]
display_aspect_ratio=0:1
r_frame_rate=30/1
avg_frame_rate=0/0
[/STREAM]
[/PROGRAM]
[STREAM]
display_aspect_ratio=0:1
r_frame_rate=30/1
avg_frame_rate=0/0
[/STREAM]

[uldza]

I have the same problem, but for my streams the story is a little bit different.
I have stream with 4 quality levels. Highest being (1080p). When lowest qualities are played, there are no problems - no mentioned green artifact. But when hls.js automatically switches to highest available quality 1080p - green artifact appears.

My Setup:

• OS - OSX 10.11.6;
• Browser Chrome: 53.0 (64-bit)

[blacktrash]

If it did not happen before, it's probably one of Chrome's bad MP4 decoder phases - wait for the next update ;-)

[cpeterso]

This stream's problems are not limited to Chrome. I see garbled video in Firefox 51, Chrome 53, and Safari on OS X 10.11.6.

[blacktrash]

@cpeterso - indeed, I was staring at the bug title and forgot. So it may worth looking into the stream. Strictly speaking the missing value for average frame rate could signal variable frame rate.
And signaling display aspect ratio explicitly is usually not a bad idea either.

[mangui]

the way NAL units are spread across PES packet is weird:
usually we don't have more than one IDR (key frame) per PES packet.
in this case the first PES packet contains 50+ key frame.
that is weird because one PES packet = one timestamp.

the stream is playing with flashls and natively so I will dig further to understand what is going on.

[log] > AUD SPS PPS IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR
[log] > IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR IDR
[log] > AUD NDR NDR NDR NDR NDR NDR NDR NDR NDR
[log] > AUD NDR NDR NDR NDR NDR NDR NDR NDR NDR NDR NDR

[radiantmediaplayer]

Thanks guys for your feedback. Much appreciated.
I can also see that the stream seems to play fine with native HLS on MS Edge or Mac OS Safari.
The stream is packaged with Wowza 4.5. I am still trying to get to the bottom of how the MP4 behind was encoded. If it was up to me I would just re-transcode the media to see if it works better - but in this case it is not :/

[radiantmediaplayer]

FYI the mp4 was generated through Wowza using the "Live Stream Recording" functionality. Once the live is over the recorded mp4 is there for on-demand viewing.

[mangui]

the issue should be fixed, please check here, I did the fix in a dedicated branch as it still need a bit of cleanup and additional testing

[radiantmediaplayer]

I can confirm that the issue is not happening anymore where we did notice it with this patch.

[uldza]

I can also confirm that in my case green artifacts is gone with this fix.

[mangui]

should be fixed on master now
could you recheck your streams on demo page ?

[radiantmediaplayer]

Yes the issue is fixed on master as well.

[mangui]

released in v0.6.2-7