Media Source Api not working for a custom webm fil

Question

I am referring a media source api demo given on this link

It is working fine for the given test webm file but when i tried to change the name of the file to a custom webm file the code stopped working.

It is generating following error : Uncaught Error: INVALID_STATE_ERR: DOM Exception 11 at following code : sourceBuffer.append(new Uint8Array(e.target.result));

To check whether the custom webm file is working i have created a test page in which i have defined a video tag having source of that custom webm file. When i ran the code it is working fine.

I am unable to understand the reason for this strange behavior.

Answer 1

The most likely problem is your WebM file has Clusters that don't start with a keyframe.

In Chrome dev-channel builds (ie Chrome 25 or later), you can verify this with the following steps.

1. Open chrome:media-internals in another tab.
2. Return to the tab with your test page and reload it.
3. When the error occurs again, switch back to chrome:media-internals tab and look for the bottom entry under the "Active media players:" header. It should have the same blob: URL that you passed to the video element src attribute.
4. Click on the blob: URL to expand the player data.
5. Click on the "Log:" entry to expose the player logging data.
6. Search for entries that have "MEDIA_SOURCE_ERROR" in the "Event:" column. These entries should provide information about what is wrong with the content passed to the browser.

If you see a message that says something like "Media segment did not begin with keyframe." then it means your file has Clusters that don't start with a keyframe. This is common with content that is generated by FFmpeg. You can fix your file in one of the following ways:

1. Run the sample_muxer program mentioned in section 2.2.5 of the WebM adaptive streaming guide
2. Run the mse_webm_remuxer program I wrote as part of my mse-tools project.

Answer 2

UPDATE: no internal error shown in my case (accepted answer suggests to check) but still the same problem

I ran into the same trouble when trying to play recorded .webm file by MediaRecorder API back using Media Source Extensions (MSE). Chrome (51) recordings are malformed, Firefox (46) seems OK.

To get it working you have to fix cues in .webm file:

1. clone https://github.com/webmproject/libwebm
2. make sure you have cmake version >= 3.2 (https://askubuntu.com/questions/610291/how-to-install-cmake-3-2-on-ubuntu-14-04)
3. cmake .
4. make
5. ./sample_muxer -i original.webm -o fixed.webm
6. load fixed.webm into DASH / your own player!

Hope it helped someone. It was quite difficult to google any information without the DASH keyword (i am not using DASH, only the same underlying technology - MSE) :)