Skip to content

Frequent bufferAppendError errors occur during LL-HLS playback in ultra-fast network environments since hls.js v1.6.x #7321

@SangwonOh

Description

@SangwonOh

What version of Hls.js are you using?

v.1.6.5

What browser (including version) are you using?

Chrome 137.0.7151.104 (Offical Build) (64bit)

What OS (including version) are you using?

Windows 10, Widows 11

Test stream

If needed for analysis, we’re happy to provide a Docker-based test environment that can reproduce the issue in a local network.

Configuration

{
  "debug": true,
  "enableWorker": true,
  "lowLatencyMode": true,
  "backBufferLength": 90
}

Additional player setup steps

No response

Checklist

Steps to reproduce

  1. Set up a Low-Latency HLS streaming server (e.g., OvenMediaEngine) in a local network. Because the local network is extremely fast, the issue can be reproduced 100% of the time.
  2. Publish a live stream to the streaming server using encoder like OBS.
  3. Open the hls.js 1.6.5 demo page and play the stream from the streaming server.
  4. During playback, frequent bufferAppendError errors occur, causing the video to momentarily freeze.

Expected behaviour

Playback should proceed smoothly without any bufferAppendError errors or stalls, just like it does with hls.js v1.5.x and iOS safari.

What actually happened?

Issue Overview

This issue occurs only when playing LL-HLS streams using hls.js v1.6.x in extremely fast network environments.

Reproduction Based on Network Conditions

To verify that this issue only occurs in fast networks, I tested with hls.js v1.6.5 in various network environments. The results are as follows:

  • Streaming server in a local network / playback in same local network

    • bufferAppendError occurs
  • Streaming server in a local network / playback in same network with Chrome DevTools throttling (simulating fast 4G)

    • bufferAppendError does not occur
  • Streaming server in EC2 (Seoul) / playback in Seoul

    • bufferAppendError occurs
  • Streaming server in EC2 (California) / playback in Seoul

    • bufferAppendError does not occur

Note: Under the same network conditions and using the same stream, this issue does not occur with hls.js v1.5.20 or iOS Safari's native player.

Issue Description

The following symptoms are observed when this issue occurs.

Image

  1. Partial segments are downloaded extremely quickly.
  2. Within a few seconds to a couple of minutes after playback starts, bufferAppendError begins to occur repeatedly.
    • 2.1 Playback temporarily freezes when the error occurs.
    • 2.2 hls.js may switch from loading partial segments to loading full segments.
    • 2.3 Error event logs show the following information:
 error.details: "bufferAppendError" 
 error.sourceBufferName: "video"
 error.type: "mediaError"
 error.stack:
 InvalidStateError: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer is still processing an 'appendBuffer' or 'remove' operation.
    at BufferController.appendExecutor (https://7127ae6b.hls-js-dev.pages.dev/dist/hls.js:19965:10)
    at Object.execute (https://7127ae6b.hls-js-dev.pages.dev/dist/hls.js:19331:19)
    at BufferOperationQueue.executeNext (https://7127ae6b.hls-js-dev.pages.dev/dist/hls.js:18574:21)
    at BufferOperationQueue.append (https://7127ae6b.hls-js-dev.pages.dev/dist/hls.js:18511:14)
    at BufferController.append (https://7127ae6b.hls-js-dev.pages.dev/dist/hls.js:20048:29)
    at BufferController.onBufferAppending (https://7127ae6b.hls-js-dev.pages.dev/dist/hls.js:19409:12)
    at EventEmitter.emit (https://7127ae6b.hls-js-dev.pages.dev/dist/hls.js:372:37)
    at Hls.emit (https://7127ae6b.hls-js-dev.pages.dev/dist/hls.js:35599:28)
    at Hls.trigger (https://7127ae6b.hls-js-dev.pages.dev/dist/hls.js:35603:21)
    at StreamController.bufferFragmentData (https://7127ae6b.hls-js-dev.pages.dev/dist/hls.js:9862:16)

error.code: 11
error.name: "InvalidStateError"

Additional Analysis of Buffer Append Failures

When bufferAppendError occurs, I observe the following exception:

Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer is still processing an 'appendBuffer' or 'remove' operation.

From this, I suspect that in very fast network environments, partial segments are being downloaded and appended to the buffer too rapidly.
Under certain conditions, this leads to a race condition, which causes appendBuffer to fail.

As a result of this failure, there is no buffered data available for playback, which seems to cause the playback to temporarily freeze.

In Chrome's chrome://media-internals, I can see some "DEMUXER_UNDERFLOW" logs:

{
  "time": 23170.012000001967,
  "key": "video_buffering_state",
  "value": {
    "reason": "DEMUXER_UNDERFLOW",
    "state": "BUFFERING_HAVE_NOTHING"
  }
}

Additionally to determine if this is related to how hls.js uses Web Workers for buffer management, I tested with "enableWorker": false.

  • With "enableWorker": true, bufferAppendError occurs almost 100% of the time, repeatedly during playback.
  • With "enableWorker": false, the error only occurs sporadically during long playback sessions, and does not seem to repeat continuously.

Conclusion

I wonder if this issue might be related to the changes introduced in v1.6.0, specifically the update on "Improved stall detection and buffer gap handling".

Could this behavior be a side effect of those changes?
Or is it possibly caused by another underlying problem?

I would greatly appreciate any insights or guidance from the hls.js community regarding whether this is a known regression or an unintended consequence of recent improvements.

Console output

buffer_append_error-slim.log

Chrome media internals output

media_internal_log.json

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions