file-segmenter.html

<input id="fileInput" type="file"><br/>
<input id="keepMdatInput" type="checkbox">Keep mdat data</input><br/>
<input id="doSegmentation" type="checkbox" checked>Perform Segmentation</input><br/>
<input id="doReleaseSamples" type="checkbox" checked>Release Samples after Segmentation</input><br/>
Number of samples per segment or per extraction: <input id="nbSamples" type="range" value=1000 min=1 max=10000 onchange="this.nextElementSibling.value = this.value" ></input><output>1000</output><br/>
<button onclick="load()">Load</button>
<div >File Size:
  <p id='file_size'></p>
</div>
<div>Memory usage:
  <p id='memory_usage'></p>
</div>
<script src="../dist/mp4box.all.min.js"></script>
<script>
  var mp4 = null;
  function updateMemory() {
    document.getElementById('memory_usage').innerText = "jsHeapSizeLimit: "+Math.round(window.performance.memory.jsHeapSizeLimit/(1024*1024))+"MB\n"+
                                                        "totalJSHeapSize: "+Math.round(window.performance.memory.totalJSHeapSize/(1024*1024))+"MB\n"+
                                                        "usedJSHeapSize:  "+Math.round(window.performance.memory.usedJSHeapSize/(1024*1024))+"MB";
  }

  updateMemory();

  function load() {
    Log.setLogLevel(Log.info);
    console.log("Creating MP4Box file with parameter: "+document.getElementById('keepMdatInput').checked);
    mp4 = MP4Box.createFile(document.getElementById('keepMdatInput').checked);
    mp4.onError = function(e) { console.log(e); };
    mp4.onReady = function(info) {
      if (document.getElementById('doSegmentation').checked) {
        console.log("Sample batch size: "+(+document.getElementById('nbSamples').value));
        for (var i = 0; i < info.tracks.length; i++) {
          var track = info.tracks[i];
          mp4.setSegmentOptions(info.tracks[i].id, null, { nbSamples: +document.getElementById('nbSamples').value } );
        }
        mp4.initializeSegmentation();
      }
      mp4.start();
    };
    updateMemory();

    mp4.onSegment = function (id, user, buffer, sampleNum, is_last) {
      console.log("Received"+(is_last?" last":"")+" segment on track "+id+" with sample up to "+sampleNum);
      if (document.getElementById('doReleaseSamples').checked) {
        mp4.releaseUsedSamples(id, sampleNum);
      }
      if (is_last) {
        updateMemory();
      }
    }

    var offset = 0;
    var file = document.getElementById('fileInput').files[0];
    if (file) {
      var reader = file.stream().getReader();
      reader.read().then(function getNextChunk({done, value}) {
        if (done) {
          mp4.flush();
          console.log("done");
          document.getElementById('file_size').innerText = Math.round(offset/(1024*1024))+"MB";
          updateMemory();
          // mp4 = null;
          return;
        }

        var copy = value.buffer;
        copy.fileStart = offset;
        offset += value.length;

        mp4.appendBuffer(copy);
        return reader.read().then(getNextChunk);
      });
    }
  }

</script>