Uncaught TypeError: r.assert is not a function at e.remuxVideo

[a-ruban]

What version of Hls.js are you using?

1.2

What browser (including version) are you using?

Chrome / Firefox (doesn't matter)

What OS (including version) are you using?

Linux Mint 21

Test stream

https://hls-js.netlify.app/demo/?src=https%3A%2F%2Fs3.eu-central-1.amazonaws.com%2Finterview.top.storage%2Fmedia%2Fvideos%2F--rNQx%2F.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsInN0b3BPblN0YWxsIjpmYWxzZSwiZHVtcGZNUDQiOmZhbHNlLCJsZXZlbENhcHBpbmciOi0xLCJsaW1pdE1ldHJpY3MiOi0xfQ==

Configuration

Note: i use small hls_duration - 2 seconds (works fine on localhost and demo page)

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

Additional player setup steps

I use hls js in Vue project like this:
if (Hls.isSupported()) { const hls = new Hls() hls.loadSource(this.videoSource) hls.attachMedia(this.player.media) window.hls = hls }

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 (latest release) on https://hls-js.netlify.com/demo and not just on my page
• The issue occurs in the latest client (main branch) 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

The video is loading on localhost, but not loading when built and deployed.
It's not a CORS problem, cause I can see .m3u8 file and the first hls-part loaded with status 200.

Expected behaviour

Video loaded the same way as on localhost or demo page

What actually happened?

Mentioned errors, metadata loaded successfuly

Console output

In console with debug mode I can see this:
    `
    [log] > Debug logs enabled for "Hls instance"
index.js:1 [log] > stopLoad
index.js:1 [log] > loadSource:https://s3.eu-central-1.amazonaws.com/interview.top.storage/media/videos/--rNQx/.m3u8
index.js:1 [log] > [stream-controller]: Trigger BUFFER_RESET
index.js:1 [log] > attachMedia
index.js:1 [log] > [level-controller]: manifest loaded, 1 level(s) found, first bitrate: 0
index.js:1 [log] > 1 bufferCodec event(s) expected
index.js:1 [log] > startLoad(-1)
index.js:1 [log] > [level-controller]: switching to level 0 from -1
index.js:1 [log] > [stream-controller]: STOPPED->IDLE
index.js:1 [log] > [subtitle-stream-controller]: STOPPED->IDLE
index.js:1 [log] > [stream-controller]: Level 0 loaded [0,2205], cc [0, 0] duration:4412
index.js:1 [log] > [buffer-controller]: Updating Media Source duration to 4412.000
index.js:1 [log] > [buffer-controller]: Media source opened
index.js:1 [log] > [stream-controller]: Loading fragment 0 cc: 0 of [0-2205] level: 0, target: 0
index.js:1 [log] > [stream-controller]: IDLE->FRAG_LOADING
index.js:1 [log] > demuxing in webworker
index.js:1 [log] > [transmuxer-interface, main]: Starting new transmux session for sn: 0 p: -1 level: 0 id: 1
        discontinuity: true
        trackSwitch: true
        contiguous: false
        accurateTimeOffset: true
        timeOffset: 0
        initSegmentChange: true
index.js:1 [log] > [stream-controller]: Loaded fragment 0 of level 0
f69e4147-91ba-487c-b8d5-4abfe13ec743:1 [log] > Debug logs enabled for "main"
index.js:1 [log] > [mp4-remuxer]: ISGenerated flag reset
index.js:1 [log] > [mp4-remuxer]: initPTS & initDTS reset
index.js:1 [log] > [mp4-remuxer]: reset next timestamp
index.js:1 [log] > manifest codec:undefined, ADTS type:2, samplingIndex:3
index.js:1 [log] > parsed codec:mp4a.40.5, rate:48000, channels:2
index.js:1 [warn] > Exception in webworker, fallback to inline
warn @ index.js:1
v.onerror @ hls.js:13024
error (async)
t @ hls.js:13022
n._handleFragmentLoadProgress @ hls.js:8538
i @ hls.js:2161
(anonymous) @ hls.js:2408
Promise.then (async)
n._doFragLoad @ hls.js:2405
n._loadFragForPlayback @ hls.js:2163
n.loadFragment @ hls.js:2150
...

f69e4147-91ba-487c-b8d5-4abfe13ec743:1 Uncaught TypeError: r.assert is not a function
    at e.remuxAudio 
    
    [log] > [transmuxer.ts]: Flushed fragment 0 of level 0
    
     Uncaught TypeError: r.assert is not a function
    at e.remuxVideo
    `

Chrome media internals output

No response

[robwalch]

Hi @a-ruban,

Are you writing over console somewhere else in your application (for example to override console.log)? If so make sure to include console.assert.

hls.js/src/remux/mp4-remuxer.ts

Line 626 in 87d696b

console.assert(

[a-ruban]

@robwalch thanks for the hint!

I finished with forking hls.js repo, commenting all console.assert stuff, building library and installing hls.js to my project via github. Now it working just fine.

As a suggestion, I saw transform-remove-console plugin in hls.js webpack config, maybe it makes sense configure it to remove this .assert stuff if it's not neccessary.