Setting CODECS is not being reflected when playing video for HLS Playlist

[vibhoothi]

What version of Hls.js are you using?

Testing from latest master, also player.video

What browser and OS (including versions) are you using?

Chrome 88, Firefox 86

Test stream:

https://mindfreeze.tk/~mindfreeze/sintel/prog_index.m3u8
https://player.video/hlsjs/embed.html?controls=&player=hlsjs&src=https://mindfreeze.tk/~mindfreeze/sintel/prog_index.m3u8
https://hls-js.netlify.app/demo/?src=https%3A%2F%2Fmindfreeze.tk%2F~mindfreeze%2Fsintel%2Fprog_index.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsImR1bXBmTVA0IjpmYWxzZSwibGV2ZWxDYXBwaW5nIjotMSwibGltaXRNZXRyaWNzIjotMX0=

Configuration:

{
  "debug": true,
  "enableWorker": true,
  "liveBackBufferLength": 900
}

Checklist

• The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
• The issue occurs in the stable client on https://hls-js.netlify.com/demo and not just on my page

• The issue occurs in the latest client on https://hls-js-dev.netlify.com/demo and not just on my page

• The stream has correct Access-Control-Allow-Origin headers (CORS)
• There are no network errors such as 404s in the browser console when trying to play the stream

Steps to reproduce

1. Load the URL
2. Fire-up the browser logs
3. We can see that
   [log] > main track:video,container:video/mp4,codecs[level/parsed]=[avc1.64001f/avc1.64001f]
4. Firefox is able to override this and plays fine, even if we do not provide #EXT-X-STREAM-INF:CODECS="av01.0.04M.08, so chrome is best place to see clearly how it fails to playback

Expected behavior

Normal Playback of video
What you expected to happen

Actual behavior

Crash of having no video stream,

What actually happened

Console output

bubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: SourceBuffer {ended: false, mode: "segments", updating: false, timestampOffset: 0, appendWindowStart: 0, …}defaultPrevented: falseeventPhase: 0isTrusted: truepath: []returnValue: truesrcElement: SourceBuffer {ended: false, mode: "segments", updating: false, timestampOffset: 0, appendWindowStart: 0, …}target: SourceBuffer {ended: false, mode: "segments", updating: false, timestampOffset: 0, appendWindowStart: 0, …}timeStamp: 11279.860000009649type: "error"__proto__: Event
Eventbubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: SourceBuffer {ended: false, mode: "segments", updating: false, timestampOffset: 0, appendWindowStart: 0, …}defaultPrevented: falseeventPhase: 0isTrusted: truepath: []returnValue: truesrcElement: SourceBuffer {ended: false, mode: "segments", updating: false, timestampOffset: 0, appendWindowStart: 0, …}appendWindowEnd: InfinityappendWindowStart: 0buffered: (...)ended: falsemode: "segments"onabort: nullonerror: nullonupdate: ƒ ()onupdateend: nullonupdatestart: nulltimestampOffset: 0updating: false__proto__: SourceBuffertarget: SourceBuffer {ended: false, mode: "segments", updating: false, timestampOffset: 0, appendWindowStart: 0, …}timeStamp: 11279.860000009649type: "error"__proto__: Event
(anonymous) @ logger.js:40
The video could not be loaded, either because the server or network failed or because the format is not supported - CHUNK_DEMUXER_ERROR_APPEND_FAILED: Video stream codec av1 doesn't match SourceBuffer codecs.
handleVideoEvent @ main.js:779
logger.js:40 [log] > media source closed
33main.js:935 Uncaught DOMException: Failed to read the 'buffered' property from 'SourceBuffer': This SourceBuffer has been removed from the parent media source.
    at checkBuffer (https://hls-js.netlify.app/dist/hls-demo.js:2180:94)

media-internals output: https://paste.debian.net/1190556/

It is being discussed in Slack and after couple of converstaion seems more of a bug in hls-js
Also chromium bug tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=1189633
Even if there is a bug, seeting the codecs, should work and send the codec details from hls playlist iIUC,
If we see here

hls.js/src/is-supported.ts

Line 16 in f32fd61

typeof mediaSource.isTypeSupported === 'function' &&

It do check the supported, not exactly sure if this is the function which causes the default fallback to avc,

To be clear, the video is generated as fmp4, with hls playlist with hellp of ffmpeg, and plays fine via mpv/vlc/firefox and also on mobile firefox devices but not on chrome. There might be some way of relaxing sourceBuffer details in Firefox, but not in chrome, so it refuses to play.

Would be nice to hear more views or suggestions.
Edit:
Chromium team, have mentioend that it it should be from hls.js
https://bugs.chromium.org/p/chromium/issues/detail?id=1189633#c13