How to generate Initialization Segment of webm video to use with Media Source API

Question

I'm building a small application that use MediaRecoder API to split the recoding video from webcam and upload all the part to server.
I see that with Media Source API, I need to play the first part and then play any other part.

According to http://www.w3.org/TR/media-source/#examples I need the "Initialization Segment" at the beginning of the file.

How can I generate "Initialization Segment" of WebM in JS so I can play any part I choose. Is there any lib for that? (I have no knowledge about WebM byte stream format)

hello @nvcnvn! any progress with topic? I generate vp8 stream to udp port and my little server to udp->websockets. I also don't know what kind of initialization segment i should deliver and how to generate it.. — zarkone, Jun 05 '15 at 11:58
@zarkone, I found this is the "dead end" for my project, MediaRecoder don't split the video in ton parts that it can play, it just simple split thevideo to a parts of bytes. No way to replay these parts by Media Source — nvcnvn, Jun 08 '15 at 04:19

Mazzu · Answer 1 · 2015-01-24T08:09:36.623

You need to use media source extensions

Please refer to below example

<script>
  var appendID = "123";

  function onOpen(e) {
    var video = e.target;

    var headers = GetStreamHeaders();

    if (headers == null) {
      // Error fetching headers. Signal end of stream with an error.
      video.sourceEndOfStream(HTMLMediaElement.EOS_NETWORK_ERR);
    }

    video.sourceAddId(appendID, 'video/webm; codecs="vorbis,vp8"');

    // Append the stream headers (i.e. WebM Header, Info, and Tracks elements)
    video.sourceAppend(appendID, headers);

    // Append some initial media data.
    video.sourceAppend(appendID, GetNextCluster());
  }

  function onSeeking(e) {
    var video = e.target;

    // Abort current segment append.
    video.sourceAbort(appendID);

    // Notify the cluster loading code to start fetching data at the
    // new playback position.
    SeekToClusterAt(video.currentTime);

    // Append clusters from the new playback position.
    video.sourceAppend(appendID, GetNextCluster());
    video.sourceAppend(appendID, GetNextCluster());
  }

  function onProgress(e) {
    var video = e.target;

    if (video.sourceState == video.SOURCE_ENDED)
      return;

    // If we have run out of stream data, then signal end of stream.
    if (!HaveMoreClusters()) {
      video.sourceEndOfStream(HTMLMediaElement.EOS_NO_ERROR);
      return;
    }

    video.sourceAppend(appendID, GetNextCluster());
  }

  var video = document.getElementById('v');
  video.addEventListener('sourceopen', onOpen);
  video.addEventListener('seeking', onSeeking);
  video.addEventListener('progress', onProgress);
</script>


<video id="v" autoplay> </video>

<script>
  var video = document.getElementById('v');
  video.src = video.mediaSourceURL;
</script>

So how can youimplement "GetStreamHeaders" function? Note that my question is about generation the header by javascript! — nvcnvn, Jan 22 '15 at 15:41
@nvcvn, it is not possible to do such customization for GetStreamHeaders using Client-side Javascript, so you need to rely on server side things. You may refer to wiki links for same using PHP at https://gerrit.wikimedia.org/r/#/c/34560/1/includes/filerepo/file/File.php — Mazzu, Jan 23 '15 at 04:31
This doesn't even answer the question. The problem is generating a WebM initialization segment according to the [WebM Byte Stream format](https://w3c.github.io/media-source/webm-byte-stream-format.html#webm-init-segments), and your answer is not relevant. — Amit Beckenstein, Aug 05 '19 at 07:18
You are referring to two different ways of doing what seems to be the same task. However, using xhr you may set xhr.setRequestHeaders("Range Bytes" int bytes) where xhr is a new server request to the webm file and the range in bytes determines the exact number of bytes the header information is, using this the blob object the media src is pointing to should be initialized with the appropriate header information, keep in mind this is for the one stream(or file), a new header file should be generated if you were to record the stream and save as one larger file? — Brandon Roberts, Oct 12 '20 at 22:49

How to generate Initialization Segment of webm video to use with Media Source API

1 Answers1