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)

Answer 1

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>