mp4.html 14.2 KB

Raw Blame History Permalink

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="css/normalize.min.css">
  <link rel="stylesheet" href="css/main.css">

  <script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
  <!--[if lt IE 7]>
      <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
      <![endif]-->

  <div class="header-container">
    <header class="wrapper clearfix">
      <h1 class="title">Transmux Analyzer</h1>
    </header>
  </div>

  <div class="main-container">
    <div class="main wrapper clearfix">

      <article>
        <header>
          <p>
            This page can help you inspect the results of the
            transmuxing to mp4 files performed by
            videojs-contrib-hls. It's still a bit tricky to create a
            MSE-compatible fragmented MP4. We've had luck
            with <a href="http://www.bento4.com/developers/dash/">Bento4</a>
            and ffmpeg. If you have both of those utilities installed,
            you can create a working MP4 like this:
            <pre>
ffmpeg -i movie.ts -vn -codec copy -absf aac_adtstoasc movie-audio.mp4
mp4fragment --track audio --fragment-duration 11000 movie-audio.mp4 movie-audio.m4s
            </pre>
          <small>Looking for the <a href="index.html">FLV tool</a>?</small>
        </header>
        <section id="video-place">
        </section>
        <section>
          <h2>Inputs</h2>
          <form id="inputs">
            <label>
              Your original MP2T segment:
              <input type="file" id="original">
            </label>
            <label>
              A working, MP4 version of the underlying stream
              produced by another tool:
              <input type="file" id="working">
            </label>
          </form>
        </section>
        <section>
          <h2>Comparision</h2>
          <div id="comparison">
            A diff of the structure of the two MP4s will appear here
            once you've specified an input TS file and a known working
            MP4.
          </div>
        </section>
        <section>
          <h2>Structure</h2>
          <div class="result-wrapper">
            <h3>videojs-contrib-hls</h3>
            <pre class="vjs-boxes">
            </pre>
          </div>
          <div class="result-wrapper">
            <h3>Working</h3>
            <pre class="working-boxes"></pre>
          </div>
        </section>
        <section>
          <h2>Results</h2>
          <div class="result-wrapper">
            <h3>videojs-contrib-hls</h3>
            <div class="vjs-hls-output result">
              <p>
                The results of transmuxing your input file with
                videojs-contrib-hls will show up here.
              </p>
            </div>
          </div>
          <div class="result-wrapper">
            <h3>Working</h3>
            <div class="working-output result">
              <p>
                The "good" version of the file will show up here.
              </p>
            </div>
          </div>
        </section>
      </article>

    </div> <!-- #main -->
  </div> <!-- #main-container -->

  <div class="footer-container">
    <footer class="wrapper">
      <h3>footer</h3>
    </footer>
  </div>


  <script>
    window.videojs = window.videojs || {
      Hls: {}
    };
  </script>
  <script src="../../node_modules/videojs-contrib-media-sources/node_modules/mux.js/lib/stream.js"></script>
  <script src="../../node_modules/videojs-contrib-media-sources/node_modules/mux.js/lib/mp4-generator.js"></script>
  <script src="../../node_modules/videojs-contrib-media-sources/node_modules/mux.js/lib/transmuxer.js"></script>
  <script src="../../node_modules/videojs-contrib-media-sources/node_modules/mux.js/lib/mp4-inspector.js"></script>
  <script src="../../node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/flv-tag.js"></script>
  <script src="../../node_modules/videojs-contrib-media-sources/node_modules/mux.js/lib/exp-golomb.js"></script>

  <script src="../../src/bin-utils.js"></script>

  <!-- Include QUnit for object diffs -->
  <script src="../../node_modules/qunitjs/qunit/qunit.js"></script>
  <script>
    /*
    MOSTLY STOLEN FROM https://w3c.github.io/media-source/#examples
    */
    function setupMSE (videoElement, getNextVideoSegment, getNextAudioSegment) {
      function onSourceOpen(videoTag, e) {
        var
          initVideoSegment = getNextVideoSegment(),
          initAudioSegment = getNextAudioSegment(),
          numberInited = 0,
          videoBuffer, audioBuffer,
          mediaSource = e.target;

        if (mediaSource.sourceBuffers.length > 0)
            return;

        if (initVideoSegment) {
          videoBuffer = mediaSource.addSourceBuffer('video/mp4;codecs=avc1.4d401f');
        }
        if (initAudioSegment) {
          audioBuffer = mediaSource.addSourceBuffer('audio/mp4;codecs=mp4a.40.2');
        }

        videoTag.addEventListener('progress', onProgress.bind(videoTag, mediaSource));

        if (initVideoSegment == null && initAudioSegment == null) {
          // Error fetching the initialization segment. Signal end of stream with an error.
          mediaSource.endOfStream("network");
          return;
        }

        // Append the initialization segment.
        var firstAppendHandler = function(e) {
          var sourceBuffer = e.target;
          sourceBuffer.removeEventListener('updateend', firstAppendHandler);

          // Append some initial media data.
          if (++numberInited === 2) {
            onProgress(mediaSource, e);
          }
        };

        if (videoBuffer) {
          videoBuffer.addEventListener('updateend', firstAppendHandler);
        }
        if (audioBuffer) {
          audioBuffer.addEventListener('updateend', firstAppendHandler);
        }

        if (initVideoSegment) {
          videoBuffer.appendBuffer(initVideoSegment);
        }
        if (initAudioSegment) {
          audioBuffer.appendBuffer(initAudioSegment);
        }
      }

      function appendNextMediaSegment(getNextMediaSegment, mediaSource, sourceBuffer) {
        if (mediaSource.readyState == "closed") {
          return;
        }

        var mediaSegment = getNextMediaSegment();
        // If we have run out of stream data, then signal end of stream.
        if (mediaSegment == null) {
      //    mediaSource.endOfStream("network");
          return false;
        }

        // Make sure the previous append is not still pending.
        if (sourceBuffer.updating) {
            return false;
        }

        // NOTE: If mediaSource.readyState == “ended”, this appendBuffer() call will
        // cause mediaSource.readyState to transition to "open". The web application
        // should be prepared to handle multiple “sourceopen” events.
        sourceBuffer.appendBuffer(mediaSegment);
        return true;
      }
    /*
      function onSeeking(mediaSource, e) {
        var video = e.target;

        if (mediaSource.readyState == "open") {
          // Abort current segment append.
          mediaSource.sourceBuffers[0].abort();
        }

        // Notify the media segment loading code to start fetching data at the
        // new playback position.
        SeekToMediaSegmentAt(video.currentTime);

        // Append a media segment from the new playback position.
        appendNextMediaSegment(mediaSource);
      }
    */
      function onProgress(mediaSource, e) {
        (appendNextMediaSegment(getNextVideoSegment, mediaSource, mediaSource.sourceBuffers[0]) &&
        appendNextMediaSegment(getNextAudioSegment, mediaSource, mediaSource.sourceBuffers[1]));
      }

      var mediaSource = new MediaSource();
      mediaSource.addEventListener('sourceopen', onSourceOpen.bind(this, videoElement));
      videoElement.src = window.URL.createObjectURL(mediaSource);
    }
    function getSegment (segmentArray) {
        var segment = segmentArray.shift();
        if (segment) {
          return segment.data;
        }
        return null;
    }
  </script>
  <script>
    var inputs = document.getElementById('inputs'),
        original = document.getElementById('original'),
        working = document.getElementById('working'),

        vjsParsed,
        workingParsed,
        diffParsed,
        vjsBytes,
        workingBytes,

        vjsBoxes = document.querySelector('.vjs-boxes'),
        workingBoxes = document.querySelector('.working-boxes'),

        vjsOutput = document.querySelector('.vjs-hls-output'),
        workingOutput = document.querySelector('.working-output'),

        video = document.createElement('video'),
        mediaSource = new MediaSource();

        document.querySelector('#video-place').appendChild(video);

        logevent = function(event) {
          console.log(event.type);
        };

    // output a diff of the two parsed MP4s
    diffParsed = function() {
      var comparison, diff, transmuxed;
      if (!vjsParsed || !workingParsed) {
        // wait until both inputs have been provided
        return;
      }
      comparison = document.querySelector('#comparison');
      if (workingParsed[0].type === 'moof') {
        diff = '<h3>Media Segment Comparision</h3>';
        transmuxed = vjsParsed.slice(2);
      } else if (workingParsed.length === 2) {
        diff = '<h3>Init Segment Comparision</h3>';
        transmuxed = vjsParsed.slice(0, 2);
      } else {
        diff = '<h3>General Comparision</h3>';
        transmuxed = vjsParsed;
      }
      diff += '<p>A <del>red background</del> indicates ' +
        'properties present in the transmuxed file but missing from the ' +
        'working version. A <ins>green background</ins> indicates ' +
        'properties present in the working version but missing in the ' +
        'transmuxed output.</p>';
      diff += '<pre class="mp4-diff">' +
        QUnit.diff(muxjs.textifyMp4(transmuxed, null, ' '),
                   muxjs.textifyMp4(workingParsed, null, ' ')) +
        '</pre>';

      comparison.innerHTML = diff;
    };

    mediaSource.addEventListener('sourceopen', function() {
      var
        buffer = mediaSource.addSourceBuffer('video/mp4;codecs=avc1.4d400d');
        //buffer = mediaSource.addSourceBuffer('audio/mp4;codecs=mp4a.40.2');
      buffer.addEventListener('updatestart', logevent);
      buffer.addEventListener('updateend', logevent);
      buffer.addEventListener('error', logevent);
      window.vjsMediaSource = mediaSource;
      window.vjsSourceBuffer = buffer;
      window.vjsVideo = video;
    });
    mediaSource.addEventListener('error', logevent);
    mediaSource.addEventListener('opened', logevent);
    mediaSource.addEventListener('closed', logevent);
    mediaSource.addEventListener('sourceended', logevent);
    video.src = URL.createObjectURL(mediaSource);
    video.addEventListener('error', console.log.bind(console));


//    muxjs.log = console.log.bind(console);

    original.addEventListener('change', function() {
      var reader = new FileReader(),
        videoBuffer = [],
        audioBuffer = [];

      reader.addEventListener('loadend', function() {
        var segment = new Uint8Array(reader.result),
            transmuxer = new muxjs.mp2t.Transmuxer(),
            videoSegments = [],
            audioSegments = [],
            videoBytesLength = 0,
            audioBytesLength = 0,
            decodeMe,
            bytes,
            i, j,
            hex = '';

        // transmux the MPEG-TS data to BMFF segments
        transmuxer.on('data', function(segment) {
          if (segment.type === 'video') {
            videoSegments.push(segment);
            videoBytesLength += segment.data.byteLength;
          } else {
            audioSegments.push(segment);
            audioBytesLength += segment.data.byteLength;
          }
        });

        transmuxer.push(segment);
        transmuxer.end();
        // XXX - switch to select video/audio to show
        decodeMe = videoSegments;
        bytes = new Uint8Array(videoBytesLength);

        for (j = 0, i = 0; j < decodeMe.length; j++) {
          bytes.set(decodeMe[j].data, i);
          i += decodeMe[j].byteLength;
        }

        vjsBytes = bytes;
        vjsParsed = muxjs.inspectMp4(bytes);
        console.log('transmuxed', vjsParsed);
        diffParsed();

        // XXX - set one of videoSegments or audioSegments below to an
        //       empty array to only test one stream

        setupMSE(video,
          getSegment.bind(null, videoSegments),
          getSegment.bind(null, audioSegments));

        // clear old box info
        vjsBoxes.innerHTML = muxjs.textifyMp4(vjsParsed, null, ' ');

        // write out the result
        hex += '<pre>';
        hex += 'nothing to see here';
        hex += '</pre>';
        vjsOutput.innerHTML = hex;

        video.play();
      });

      reader.readAsArrayBuffer(this.files[0]);
    }, false);

    working.addEventListener('change', function() {
      var reader = new FileReader();
      reader.addEventListener('loadend', function() {
        var hex = '',
            bytes = new Uint8Array(reader.result);


        workingBytes = bytes;
        workingParsed = muxjs.inspectMp4(bytes);
        console.log('working', workingParsed);
        diffParsed();

        // clear old box info
        workingBoxes.innerHTML = muxjs.textifyMp4(workingParsed, null, ' ');

        // output the hex dump
        hex += '<pre>';
        hex += videojs.Hls.utils.hexDump(bytes);
        hex += '</pre>';
        workingOutput.innerHTML = hex;

        // XXX Media Sources Testing
/*        setupMSE(video,
          getSegment.bind(null, []),
          getSegment.bind(null, [{data: bytes}]));*/
        //window.vjsSourceBuffer.appendBuffer(bytes);
      });
      reader.readAsArrayBuffer(this.files[0]);
    }, false);
  </script>
</body>
</html>