Media source error (object in invalid state) when playing hls stream with audio on

[HokkanenTeemu]

Have you read the FAQ and checked for duplicate open issues?
Yes

If the problem is related to FairPlay, have you read the tutorial?

N/A

What version of Shaka Player are you using?

I'm using 4.11.4 in production at the moment but I have tested multiple versions, including the latest 4.13.0.
From what I have gathered, latest version without the issue seems to be 4.9.35.

Can you reproduce the issue with our latest release version?
Yes

Can you reproduce the issue with the latest code from main?
Yes

Are you using the demo app or your own custom app?
Yes

If custom app, can you reproduce the issue using our demo app?
Yes

What browser and OS are you using?
Safari 17/18 on iOS/iPadOS.
Latest Safari (18.2) does not seem to have this issue.

For embedded devices (smart TVs, etc.), what model and firmware version are you using?
N/A

What are the manifest and license server URIs?

The issue was discovered with our own streams but this stream that I found from hls.js demo page works also:
https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8
I tried to reproduce the issue with streams from shaka-player demo page but those seemed to work without an issue.

What configuration are you using? What is the output of player.getNonDefaultConfiguration()?

Default configuration

What did you do?

I tried to play the stream with audio.

What did you expect to happen?
Nothing particular.

What actually happened?

Playback fails after some time with InvalidStateError.
MediaError object from the video element: { code: 3, message: "Media failed to decode }
Note that the playback works if video is muted.

I added some logging and noticed that error is throwed while shaka is trying to append video buffer:

1. append audio buffer -> ok
2. MMS endstreaming
3. append video buffer -> error

The issue seems to be the MMS endstreaming event being raised between appending buffers.

Also, these this.getBuffered_ calls are causing invalid state errors when debug is enabled, I added this.streamingAllowed_ check for my own tests to supress those.

shaka-player/lib/media/media_source_engine.js

Lines 1359 to 1367 in 52fb15d

	await this.enqueueOperation_(contentType, () => {
	if (goog.DEBUG && reference && !reference.isPreload() && !isChunkedData) {
	bufferedBefore = this.getBuffered_(contentType);
	}
	this.append_(contentType, data, timestampOffset);
	}, reference ? reference.getUris()[0] : null);
	if (goog.DEBUG && reference && !reference.isPreload() && !isChunkedData) {
	const bufferedAfter = this.getBuffered_(contentType);

Are you planning to send a PR to fix it?
Not at the moment.

[avelad]

I have tested on iOS 18.3 and this issue does not exist.

[HokkanenTeemu]

@avelad Yes, the issue does not exist on latest iOS (since 18.2).
This is mainly concerning iOS 17 as I would think that anyone running iOS 18 already has 18.2 / 18.3

[avelad]

I don't have any iOS 17 device to test and troubleshoot, sorry :(