index.html 4.97 KB
<!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 compare the results of the
            transmuxing performed by videojs-contrib-hls with a known,
            working file produced by another tool. You could use
            ffmpeg to transform an MPEG-2 transport stream into an FLV
            with a command like this:
            <pre>ffmpeg -i input.ts -acodec copy -vcodec copy output.flv</pre>
          </p>
        </header>
        <section>
          <h2>Inputs</h2>
          <form id="inputs">
            <label>
              Your original MP2T segment:
              <input type="file" id="original">
            </label>
            <label>
              A working, FLV version of the underlying stream
              produced by another tool:
              <input type="file" id="working">
            </label>
          </form>
        </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>


  <!-- transmuxing -->
  <script src="../../src/flv-tag.js"></script>
  <script src="../../src/exp-golomb.js"></script>
  <script src="../../src/h264-stream.js"></script>
  <script src="../../src/aac-stream.js"></script>
  <script src="../../src/segment-parser.js"></script>
  
  <script src="../../src/bin-utils.js"></script>
  <script>
    var inputs = document.getElementById('inputs'),
        original = document.getElementById('original'),
        working = document.getElementById('working'),
        vjsOutput = document.querySelector('.vjs-hls-output'),
        workingOutput = document.querySelector('.working-output');

    original.addEventListener('change', function() {
      var reader = new FileReader();
      reader.addEventListener('loadend', function() {
        var parser = new videojs.hls.SegmentParser(),
            tags = [parser.getFlvHeader()],
            hex,
            byteLength = 0,
            data,
            i,
            pos;

        parser.parseSegmentBinaryData(new Uint8Array(reader.result));
        // collect all the tags
        while (parser.tagsAvailable()) {
          tags.push(parser.getNextTag().bytes);
        }
        // create a uint8array for the entire segment and copy everything over
        i = tags.length;
        while (i--) {
          byteLength += tags[i].byteLength;
        }
        data = new Uint8Array(byteLength);
        i = tags.length;
        pos = byteLength;
        while (i--) {
          pos -= tags[i].byteLength;
          data.set(tags[i], pos);
        }

        hex = '<pre>'
        hex += videojs.hls.utils.hexDump(data);
        hex += '</pre>'
    
        vjsOutput.innerHTML = hex;
      });
      reader.readAsArrayBuffer(this.files[0]);
    }, false);

    working.addEventListener('change', function() {
      var reader = new FileReader();
      reader.addEventListener('loadend', function() {
        var hex = '<pre>';
        hex += videojs.hls.utils.hexDump(new Uint8Array(reader.result));
        hex += '</pre>';
        workingOutput.innerHTML = hex;
      });
      reader.readAsArrayBuffer(this.files[0]);
    }, false);
  </script>
</body>
</html>