Getting `bufferStalled` and `bufferFullError` - how to gracefully handle?

[ffxsam]

What version of Hls.js are you using?

1.0.7

What browser (including version) are you using?

Firefox 90.0.2

What OS (including version) are you using?

macOS 11.4

Test stream

https://hls-js.netlify.app/demo/?src=https%3A%2F%2Ffiles-dev.reelcrafter.com%2Fusers%2F894641a5-6a99-40a0-a557-e06643b2b8f3%2Fvideos%2F11b70fdb-30b5-4203-b15f-cd27fb83d658%2Fsegment.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsInN0b3BPblN0YWxsIjpmYWxzZSwiZHVtcGZNUDQiOmZhbHNlLCJsZXZlbENhcHBpbmciOi0xLCJsaW1pdE1ldHJpY3MiOi0xfQ==

Configuration

{}

Additional player setup steps

No response

Checklist

• [X] The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
• [X] The issue occurs in the stable client (latest release) on https://hls-js.netlify.com/demo and not just on my page
• [X] The issue occurs in the latest client (main branch) on https://hls-js-dev.netlify.com/demo and not just on my page
• [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

Steps to reproduce

Tough to reproduce, but:

1. Play video
2. Skip around occasionally, let it play for stretches of about a minute or so

Expected behaviour

Either no errors or stalling (my network is really low latency & fast), or at least HLS would gracefully handle any errors.

What actually happened?

Video stops altogether.

Console output

16:42:02.768 [log] > [level-controller]: Attempt loading level index 0 with URL-id 0 https://files-dev.reelcrafter.com/users/894641a5-6a99-40a0-a…deos/11b70fdb-30b5-4203-b15f-cd27fb83d658/segment_1080p.m3u8 instrument.js:109
16:42:02.773 [log] > [stream-controller]: STOPPED->IDLE instrument.js:109
16:42:02.774 [log] > [subtitle-stream-controller]: STOPPED->IDLE instrument.js:109
16:42:02.896 [log] > [stream-controller]: Level 0 loaded [1,121], cc [0, 0] duration:901 instrument.js:109
16:42:02.897 [log] > [buffer-controller]: Updating Media Source duration to 901.000 instrument.js:109
16:42:02.900 [log] > [stream-controller]: Loading fragment 1 cc: 0 of [1-121] level: 0, target: 0 instrument.js:109
16:42:02.901 [log] > [stream-controller]: IDLE->FRAG_LOADING instrument.js:109
16:42:03.126 [log] > demuxing in webworker instrument.js:109
16:42:03.132 [log] > [transmuxer-interface, main]: Starting new transmux session for sn: 1 p: -1 level: 0 id: 1
        discontinuity: true
        trackSwitch: true
        contiguous: false
        accurateTimeOffset: true
        timeOffset: 0 instrument.js:109
16:42:03.132 [log] > [stream-controller]: Loaded fragment 1 of level 0 instrument.js:109
16:42:03.155 [log] > 79ec6129-7cbc-e641-8ec0-b642e62cea2a:603:22
16:42:03.156 [log] > [mp4-remuxer]: ISGenerated flag reset 79ec6129-7cbc-e641-8ec0-b642e62cea2a:2698:58
16:42:03.156 [log] > [mp4-remuxer]: initPTS & initDTS reset 79ec6129-7cbc-e641-8ec0-b642e62cea2a:2687:58
16:42:03.173 [log] > manifest codec:mp4a.40.2, ADTS type:2, samplingIndex:4

[snip]

16:42:20.951 [log] > [transmuxer.ts]: Flushed fragment 116 of level 0 79ec6129-7cbc-e641-8ec0-b642e62cea2a:937:59
16:42:20.988 [log] > [stream-controller]: FRAG_LOADING->PARSING instrument.js:109
16:42:20.990 [log] > [stream-controller]: PARSING->PARSED instrument.js:109
16:42:20.992 [log] > [stream-controller]: Buffered main sn: 116 of level 0 [139.761,232.536][472.549,547.536][600.036,870.036] instrument.js:109
16:42:20.992 [log] > [stream-controller]: PARSED->IDLE instrument.js:109
16:42:20.993 [log] > [stream-controller]: Loading fragment 117 cc: 0 of [1-121] level: 0, target: 870.036 instrument.js:109
16:42:20.993 [log] > [stream-controller]: IDLE->FRAG_LOADING instrument.js:109
16:42:21.122 [log] > [stream-controller]: Loaded fragment 117 of level 0 instrument.js:109
16:42:21.129 [log] > [transmuxer.ts]: Flushed fragment 117 of level 0 79ec6129-7cbc-e641-8ec0-b642e62cea2a:937:59
16:42:21.194 [log] > [stream-controller]: FRAG_LOADING->PARSING instrument.js:109
16:42:21.197 [log] > [stream-controller]: PARSING->PARSED instrument.js:109
16:42:21.276 [log] > [stream-controller]: Buffered main sn: 117 of level 0 [147.261,232.536][472.549,547.536][600.036,877.536] instrument.js:109
16:42:21.276 [log] > [stream-controller]: PARSED->IDLE instrument.js:109
16:42:21.277 [log] > [stream-controller]: Loading fragment 118 cc: 0 of [1-121] level: 0, target: 877.536 instrument.js:109
16:42:21.277 [log] > [stream-controller]: IDLE->FRAG_LOADING instrument.js:109
16:42:23.514 [log] > [stream-controller]: Loaded fragment 118 of level 0 instrument.js:109
16:42:23.523 [log] > [transmuxer.ts]: Flushed fragment 118 of level 0 79ec6129-7cbc-e641-8ec0-b642e62cea2a:937:59
16:42:23.536 [log] > [stream-controller]: FRAG_LOADING->PARSING instrument.js:109
16:42:23.543 [log] > [stream-controller]: PARSING->PARSED instrument.js:109
16:42:23.543 [log] > [stream-controller]: Buffered main sn: 118 of level 0 [154.761,232.536][472.549,547.536][600.036,885.036] instrument.js:109
16:42:23.544 [log] > [stream-controller]: PARSED->IDLE instrument.js:109
16:42:23.544 [log] > [stream-controller]: Loading fragment 38 cc: 0 of [1-121] level: 0, target: 277.63 instrument.js:109
16:42:23.544 [log] > [stream-controller]: IDLE->FRAG_LOADING instrument.js:109
16:42:23.550 [log] > [stream-controller]: media seeking to 277.630, state: FRAG_LOADING instrument.js:109
16:42:23.551 [log] > [audio-stream-controller]: media seeking to 277.630, state: STOPPED instrument.js:109
16:42:23.552 [log] > [subtitle-stream-controller]: media seeking to 277.630, state: IDLE instrument.js:109
16:42:23.553 [log] > [stream-controller]: media seeking to 277.630, state: FRAG_LOADING instrument.js:109
16:42:23.553 [log] > [audio-stream-controller]: media seeking to 277.630, state: STOPPED instrument.js:109
16:42:23.554 [log] > [subtitle-stream-controller]: media seeking to 277.630, state: IDLE instrument.js:109
16:42:23.694 [log] > [transmuxer-interface, main]: Starting new transmux session for sn: 38 p: -1 level: 0 id: 1
        discontinuity: false
        trackSwitch: false
        contiguous: false
        accurateTimeOffset: true
        timeOffset: 277.53628888888886 instrument.js:109
16:42:23.695 [log] > [stream-controller]: Loaded fragment 38 of level 0 instrument.js:109
16:42:23.695 [log] > [mp4-remuxer]: reset next timestamp 79ec6129-7cbc-e641-8ec0-b642e62cea2a:2692:58
16:42:23.720 [log] > [transmuxer.ts]: Flushed fragment 38 of level 0 79ec6129-7cbc-e641-8ec0-b642e62cea2a:937:59
16:42:23.740 [log] > [stream-controller]: FRAG_LOADING->PARSING instrument.js:109
16:42:23.750
[error] > [buffer-controller]: Error encountered while trying to append to the video SourceBuffer DOMException: The quota has been exceeded. instrument.js:109
16:42:23.753 [log] > [buffer-controller]: Removing [0,901] from the audio SourceBuffer instrument.js:109
16:42:23.756 [log] > [stream-controller]: PARSING->IDLE instrument.js:109
16:42:23.757 HLS error 
Object { args: (2) […], currentTime: 277.6297926081382, bufferedStart: 154.760997 }
instrument.js:109
16:42:23.765 [log] > recoverMediaError instrument.js:109
16:42:23.765 [log] > detachMedia instrument.js:109
16:42:23.765 [log] > [buffer-controller]: media source detaching instrument.js:109
16:42:23.806 [log] > [stream-controller]: IDLE->STOPPED instrument.js:109
16:42:23.806 [log] > [subtitle-stream-controller]: IDLE->STOPPED instrument.js:109
16:42:23.807 [log] > attachMedia instrument.js:109
16:42:23.813 [log] > [buffer-controller]: Media source opened instrument.js:109
16:42:23.814 [log] > [buffer-controller]: Updating Media Source duration to 901.000 instrument.js:109
16:42:23.814 [log] > [stream-controller]: Override startPosition with lastCurrentTime @277.630 instrument.js:109
16:42:23.815 [log] > [stream-controller]: STOPPED->IDLE instrument.js:109
16:42:23.815 [log] > [stream-controller]: Loading fragment 38 cc: 0 of [1-121] level: 0, target: 277.63 instrument.js:109
16:42:23.816 [log] > [stream-controller]: IDLE->FRAG_LOADING instrument.js:109
16:42:23.819 [log] > [subtitle-stream-controller]: STOPPED->IDLE instrument.js:109
16:42:23.893 [log] > demuxing in webworker

### Chrome media internals output

_No response_

[ffxsam]

The best way I can think of to handle this is essentially what the HLS demo does:

// inside the error event handler
        if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
          this.handleMediaError();
          player.play();
        }

The code for handleMediaError is the same as what's used in the HLS demo. The only difference is, I resume playback immediately after, since it doesn't seem to happen automatically.

Is there a better way?

[robwalch]

Hi @ffxsam,

Let me know if this is still an issue with v1.1.5. The player should resolve non-fatal error events itself as long as the stream is valid and responsive. Using handleMediaError is almost like refreshing the page or restarting the stream so if you find the need to reset the player in this way, you can do so, but you may be creating more of an interruption to the user, than if the player had been allowed to adjust he amount buffered or switch to a lower bitrate variant.

[ffxsam]

Hey Rob,

We're at 1.2.1 now. I've commented out my bizarre error-handling code and will give this a try for a while to see if the issue is gone.

[robwalch]

Hi @ffxsam,

Any update on this? Are you still experiencing issues with buffer stall or buffer full events or with playback getting stuck?

[ffxsam]

Hey @robwalch, thanks for checking in! I haven't seen this crop up in quite a while, so I don't think it's a problem anymore. I'm also using Plyr.js, which uses Hls.js under the hood, and they might be handling some of this.