javascriptflvnwjs

flv.js error, "This SourceBuffer has been removed from the parent media source" debugging


I am trying to debug a problem with streaming/viewing video content from a surveillance camera. It is an issue that only appears in a specific environment (NWJS) but not others (Chrome, Firefox.) Note however that NWJS renders content using Chrome browser engine.

In the environment where the issue appears, the video doesn't appear to be streaming, ie the screen is black. I also get the following error repeated in a rapid loop:

"Uncaught (in promise) InvalidStateError: Failed to read the 'buffered' property from 'SourceBuffer': This SourceBuffer has been removed from the parent media source."

Here is logging/error that is printed out. The bracketed lines are generated by the flv.js file which appear are showing updated status. (I don't know if the SetApplicationIsDaemon error has any bearing on this or not.):

"[MSEController] > MediaSource onSourceOpen"
"[FLVDemuxer] > Parsed onMetaData"
"[FLVDemuxer] > Parsed AVCDecoderConfigurationRecord"
"[MSEController] > Received Initialization Segment, mimeType: video/mp4;codecs=avc1.640033"
"[FLVDemuxer] > Parsed AudioSpecificConfig"
"[MSEController] > Received Initialization Segment, mimeType: audio/mp4;codecs=mp4a.40.5"
SetApplicationIsDaemon: Error Domain=NSOSStatusErrorDomain Code=-50 "paramErr: error in user parameter list" (-50)
"[MSEController] > MediaSource onSourceClose"
"Uncaught (in promise) InvalidStateError: Failed to read the 'buffered' property from 'SourceBuffer': This SourceBuffer has been removed from the parent media source."
"Uncaught (in promise) InvalidStateError: Failed to read the 'buffered' property from 'SourceBuffer': This SourceBuffer has been removed from the parent media source."
"Uncaught (in promise) InvalidStateError: Failed to read the 'buffered' property from 'SourceBuffer': This SourceBuffer has been removed from the parent media source."
ad-infinitum...

In my search on the issue I only came up with MediaSource error: This SourceBuffer has been removed from the parent media source and the answers there pointed to the issue being related to a problem with the codec of the video. Of course with the source being a surveillance camera, I have not control over that, and furthermore, as I said, it plays fine in some environments.

I have tried overriding JS methods used in the camera's code, eg, the method where the error occurs, and calls leading up to it, in order to get some clue as to why the error is occurring and how to fix/workaround it, though haven't had much success.

I have an indication that the video may actually be loaded but not streaming, because when I right-click the player and click on "media info", the "speed" value keeps changing, but no other values. The info window in Chrome browser (where the video is working fine) will show the decoded, currenttime, bufstart and bufended values gradually increasing. (The attached screen shot shows the info window to which I refer.) Also it seems something is loaded because otherwise I would either get a spinning "loading" indicator, or it would finally show a message, "stream could not be found."

media info window

A curious thing is that the page/camera has a "playback" mode which will stream video that has been recorded on the camera's sd card, and it plays just fine.

I have been working on this issue on and off for several days, trying to manipulate code and asking questions on different sites, and on the NWJS github page.


Solution

  • Without seeing any of your code, there isn't much anybody can recommend. Since you say it looks like 'speed' keeps changing but nothing is rendering, I'd guess you're missing the codecs needed for that particular stream. The "playback" mode may use different encoding, so it plays without issue.

    To get proprietary codecs working in NW.js, see: https://nwjs.readthedocs.io/en/latest/For%20Developers/Enable%20Proprietary%20Codecs/#enable-proprietary-codecs