Uncaught TypeError: Cannot read property 'removeEventListener' of null in onMediaSourceOpen

[sompylasar]

Environment

• 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
• The issue observed is not already reported by searching on Github under https://github.com/dailymotion/hls.js/issues
• The issue occurs in the latest reference client on http://dailymotion.github.io/hls.js/demo and not just on my page
• Link to playable M3U8 file: (not public)
• Hls.js version: 0.6.2-2
• Browser name/version: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
• OS name/version: Windows 7

Steps to reproduce

Call swapAudioCodec followed by recoverMediaError:

            _this._hlsjs.swapAudioCodec();
            _this._hlsjs.recoverMediaError();

in response to a "bufferStalledError":

{
  details: "bufferStalledError",
  fatal: false,
  type: "mediaError",
}

The following error should happen:

internal error happened while processing hlsMediaAttached:Failed to read the 'buffered' property from 'SourceBuffer': This SourceBuffer has been removed from the parent media source.

Error: Failed to read the 'buffered' property from 'SourceBuffer': This SourceBuffer has been removed from the parent media source.
    at Error (native)
    at Function.bufferInfo (__CENSORED__)
    at AudioStreamController.doTick (__CENSORED__)
    at AudioStreamController.tick (__CENSORED__)
    at AudioStreamController.startLoad (__CENSORED__)
    at AudioStreamController.onMediaAttached (__CENSORED__)
    at AudioStreamController.onEventGeneric (__CENSORED__)
    at AudioStreamController.onEvent (__CENSORED__)
    at EventEmitter.__L.assetCallback.Array.concat.exports.1.EventEmitter.emit (__CENSORED__)
    at EventEmitter.trigger (__CENSORED__)

During this flow (investigated myself):

recoverMediaError 
 -> detachMedia -> trigger(MEDIA_DETACHING) -> onMediaDetaching
 -> attachMedia -> trigger(MEDIA_ATTACHING) -> onMediaAttaching

(sourceopen event happens) ->
-> onMediaSourceOpen -> trigger(MEDIA_ATTACHED) ->
-> onMediaAttached -> startLoad -> tick -> doTick (in State.IDLE) -> bufferInfo ->
-> (the exception is thrown, but is caught in EventEmitter.trigger) -> 
-> (the component is likely left in an invalid state)

Master playlist:

#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=359799,CODECS="avc1.4d0028,mp4a.40.5",RESOLUTION=640x480
https://__CENSORED__/hls/playlist.m3u8?hlsId=__CENSORED__

Level playlist:

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:NO
#EXTINF:2.437,
segments/__CENSORED__/segment_0.ts

Expected behavior

No exception.

Actual behavior

Exception on this line:
https://github.com/dailymotion/hls.js/blob/c965973e73ae00490eb8692898a49cf7d5bb80cc/src/controller/buffer-controller.js#L108
this.mediaSource is null.

  onMediaSourceOpen() {
    logger.log('media source opened');
    this.hls.trigger(Event.MEDIA_ATTACHED, { media : this.media });
    // once received, don't listen anymore to sourceopen event
    this.mediaSource.removeEventListener('sourceopen', this.onmso);
    this.checkPendingTracks();
  }

At the moment of exception, this is BufferController:

BufferController {hls: Hls, handledEvents: Array[9], useGenericHandler: true, _msDuration: 2.453022, _levelDuration: 2.437…}
_levelDuration: 2.437
_msDuration: 2.453022
appendError: 0
appended: 6
appending: false
flushRange: Array[0]
handledEvents: Array[9]
  0: "hlsMediaAttaching"
  1: "hlsMediaDetaching"
  2: "hlsManifestParsed"
  3: "hlsBufferReset"
  4: "hlsBufferAppending"
  5: "hlsBufferCodecs"
  6: "hlsBufferEos"
  7: "hlsBufferFlushing"
  8: "hlsLevelUpdated"
hls: Hls
media: null
mediaSource: null
onEvent: function () bound onEvent
onmsc: null
onmse: null
onmso: null
onsbe: function () bound onSBUpdateError
onsbue: function () bound onSBUpdateEnd
parent: "main"
pendingTracks: {}
segments: Array[0]
sourceBuffer: {}
sourceBufferNb: 2
useGenericHandler: true

Console output

2016-08-12 17:52:29.344 common.js:68872 [log] > swapAudioCodec
2016-08-12 17:52:29.345 common.js:68872 [log] > recoverMediaError
2016-08-12 17:52:29.345 common.js:68872 [log] > detachMedia
2016-08-12 17:52:29.345 common.js:68872 [log] > media source detaching
2016-08-12 17:52:29.348 common.js:68872 [log] > engine state transition from IDLE to STOPPED
2016-08-12 17:52:29.351 common.js:68872 [log] > attachMedia
2016-08-12 17:52:29.388 common.js:68872 [log] > media source opened
2016-08-12 17:52:29.388 common.js:68872 [log] > startLoad
2016-08-12 17:52:29.389 common.js:68872 [log] > demuxing in webworker
2016-08-12 17:52:29.394 common.js:68872 [log] > configure startPosition @1.625
2016-08-12 17:52:29.394 common.js:68872 [log] > resuming video
2016-08-12 17:52:29.394 common.js:68872 [log] > engine state transition from STOPPED to IDLE
2016-08-12 17:52:29.395 common.js:68872 [log] > Loading 0 of [0 ,0],level 0, currentTime:1.625,bufferEnd:1.625
2016-08-12 17:52:29.395 common.js:68872 [log] > engine state transition from IDLE to FRAG_LOADING
2016-08-12 17:52:29.396 common.js:68872 [log] > configure startPosition @-1
2016-08-12 17:52:29.396 common.js:68872 [error] > internal error happened while processing hlsMediaAttached:Failed to read the 'buffered' property from 'SourceBuffer': This SourceBuffer has been removed from the parent media source.
common.js:68872 [log] > stopLoad
2016-08-12 17:52:29.404 common.js:69147 XHR failed loading: GET "https://__CENSORED__/hls/segments/__CENSORED__/segment_0.ts".
loadInternal @ common.js:69147
load @ common.js:69118
onFragLoading @ common.js:65306
onEventGeneric @ common.js:64333
onEvent @ common.js:64320
EventEmitter.emit @ common.js:57577
trigger @ common.js:64960
_loadFragmentOrKey @ common.js:60617
_fetchPayloadOrEos @ common.js:60422
_doTickIdle @ common.js:60385
doTick @ common.js:60283
tick @ common.js:60254
startLoad @ common.js:60226
startLoad @ common.js:65037
onMediaAttached @ common.js:60821
onEventGeneric @ common.js:64333
onEvent @ common.js:64320
EventEmitter.emit @ common.js:57577
trigger @ common.js:64960
onMediaSourceOpen @ common.js:59041
2016-08-12 17:52:29.404 common.js:68872 [log] > engine state transition from FRAG_LOADING to STOPPED
2016-08-12 17:52:29.404 common.js:68872 [log] > destroy
2016-08-12 17:52:29.405 common.js:68872 [log] > detachMedia
2016-08-12 17:52:29.405 common.js:68872 [log] > media source detaching
2016-08-12 17:52:29.406 common.js:69147 XHR failed loading: GET "https://__CENSORED__/hls/playlist.m3u8?hlsId=__CENSORED__".
2016-08-12 17:52:29.447 common.js:59043 Uncaught TypeError: Cannot read property 'removeEventListener' of null
onMediaSourceOpen @ common.js:59043
2016-08-12 17:52:29.474 common.js:59024 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.

[mangui]

Hi @sompylasar could you recheck with latest hls.js/master (you need to rebuild the dist)
your issue should be fixed.

[sompylasar]

Hi @mangui, thank you! From reviewing the code, this should be fixed.

I 've discovered that it was my mistake of removing the check for the fatal flag, as only fatal Hls.ErrorTypes.MEDIA_ERROR errors were properly recovered, that's why the error was discovered -- the buffer error is a Hls.ErrorTypes.MEDIA_ERROR, too. After I've filtered out only fatal media error to recover from, the error obviously stopped popping up.

I'd like to test specifically dailymotion@d5ec796 because it's a non-obvious change, but I had to switch to another project for now, so I won't get back to the player for several days.

Anyway, updating to the latest master may render the player unstable because of other changes if any, so I wouldn't rush with bleeding-edge updates here and wait for a release.