broadway-new.html | searchcode

/Demo/broadway-new.html

http://github.com/mbebenita/Broadway
HTML | 231 lines | 207 code | 23 blank | 1 comment | 0 complexity | 7a488d08948a27f02efbb157a6091d7a MD5 | raw file
Possible License(s): BSD-3-Clause

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="screen.css" rel="stylesheet" />
  <link type="text/css" href="jquery/theme/jquery-ui.css" rel="stylesheet" />
</head>
<body>
  <script type="text/javascript" src="jquery/jquery.min.js"></script>
  <script type="text/javascript" src="jquery/jquery-ui.min.js"></script>
  <script type='text/javascript'>
    var Module = {
        noInitialRun : true
    };
  </script>
  
  <script src="sylvester.js" type="text/javascript"></script>
  <script src="glUtils.js" type="text/javascript"></script>
  <script src='util.js' type='text/javascript'></script>
  <script src='canvas.js' type='text/javascript'></script>
  <script src='broadway-new.js' type='text/javascript'></script>

  <script type="text/javascript">
    $(function() {
      $("#tabs").tabs();
      $("#play").button();
      $("#play").click(function() {
        play();
      });
      
      $( "#scrubber" ).slider({
        range: false,
        min: 0,
        max: 500,
        value: 0,
        slide: function( event, ui ) {
          var pos = ui.value / 500;
          _setPosition(pos);
        }
      });
    });

    function load() {
      document.getElementById('downloadProgress').innerHTML = "Downloading, Please Wait ...";
      var clip = $("#clip").val();
      var mode = $("#mode").val();
      var xhr = new XMLHttpRequest();
      xhr.open("GET", clip, false);
      xhr.responseType = "arraybuffer";
      xhr.send(null);
      var arrayBuffer = xhr.response;
      if (arrayBuffer) {
        var byteArray = new Uint8Array(arrayBuffer);
        var array = Array.prototype.slice.apply(byteArray);
        Module.FS.createDataFile('/', 'video.264', array, true, false);
      } else {
        alert('load fail :(');
      }
      document.getElementById('downloadProgress').innerHTML = "Download Complete, Playing ...";

      // Pass canvas and context to the generated code, and do the actual run() here
      Module.canvas = document.getElementById('canvas');

      if (mode == "none") {
        Module.paint = function() {}; 
      } else if (mode == "webgl") {
        Module.paint = webGLPaint;
      } else {
        Module.ctx2D = Module.canvas.getContext('2d');
        if (!Module.ctx2D) {
          alert('Canvas not available :(');
          return;
        }
      }
      
      console.info("Running: " + clip);
      Module.run(['video.264']);
    }
    
    var loaded = false;
    var playing = false;
    
    function play() {
      if (!loaded) {
        load();
        loaded = true;
      }
      
      if (playing == false) {
        $('#play').children().first().html("Pause");
        playing = true;
        Module.play();
      } else {
        Module['CorrectionsMonitor'].print();
        
        $('#play').children().first().html("Play");
        playing = false;
        Module.stop();
        return;
      }
    }

    var webGLCanvas = null;

    var videoFrameCounter = 0;
    var windowFrameCounter = 0;
    var videoStartTime;
    var windowStartTime;
    var scoreFrameCount = 1200;
    var scoreCalculated = false;
    
    Module.onFrameDecoded = function() {
      videoFrameCounter += 1;
      windowFrameCounter += 1;
      var now = Date.now();
      if (!videoStartTime) {
        videoStartTime = now;
      }
      var videoElapsedTime = now - videoStartTime;  
      
      if (!windowStartTime) {
        windowStartTime = now;
      } else if ((now - windowStartTime) > 1000) {
        var windowElapsedTime = now - windowStartTime;
        var fps = (windowFrameCounter / windowElapsedTime) * 1000;
        document.getElementById('fps').innerHTML = fps.toFixed(2);
        windowStartTime = now;
        windowFrameCounter = 0;
      }
      
      if (videoFrameCounter % 10 == 0) {
        var fps = (videoFrameCounter / videoElapsedTime) * 1000;
        document.getElementById('fpsSinceStart').innerHTML = fps.toFixed(2);
      }
      
      if (!scoreCalculated) {
        if (videoFrameCounter % 10 == 0) {
          document.getElementById('score').innerHTML = "Calculating: " + (scoreFrameCount - videoFrameCounter);
        }
        
        if (videoFrameCounter == scoreFrameCount) {
          var fps = (videoFrameCounter / videoElapsedTime) * 1000;
          document.getElementById('score').innerHTML = fps.toFixed(2);
          scoreCalculated = true;
        }
      }
    }
    
    function updateScrubber() {
      $("#scrubber").slider('value', _getPosition() * 500);
    }
    
    function webGLPaint($luma, $cb, $cr, width, height) {
      if (!webGLCanvas) {
        webGLCanvas = new YUVWebGLCanvas(Module.canvas, new Size(width, height));
      }
      var luma = Module.HEAPU8.subarray($luma);
      var cb = Module.HEAPU8.subarray($cb);
      var cr = Module.HEAPU8.subarray($cr);
      
      webGLCanvas.YTexture.fill(luma);
      webGLCanvas.UTexture.fill(cb);
      webGLCanvas.VTexture.fill(cr);
      webGLCanvas.drawScene();
    }
  </script>
  

  <div id="doc">
    <header>
      <h1 id="site-title"><b>Broadway.js (NEW)</b></h1>
      <p id="tagline">An H.264 Decoder in Pure JavaScript <a href="broadway.html">(Try Old Codec)</a></p>
    </header>
    <div>
      <div id="setting">
        <span>Clip: 
          <select id="clip" style="margin-left: 10px;">
            <option value="mozilla.264">Mozilla</option>
            <option value="admiral.264">Admiral</option>
            <option value="matrix.264">Matrix SD</option>
            <option value="matrix_large.264">Matrix HD</option>
          </select>
        </span>
      </div>
      <div id="setting">
        <span>Render Mode: 
          <select id="mode" style="margin-left: 10px;">
            <option value="canvas">Canvas</option>
            <option value="webgl">Canvas w/ WebGL</option>
            <option value="none">None</option> 
          </select> 
        </span>
        <span style="margin-left: 10px; border: 0px" id="downloadProgress"></span>
      </div>
      <div id="setting">
        <div style="margin-left: 10px; border: 0px; clear: both;" id="downloadProgress"></div>
      </div>
      <div>
        <div id="player" style="background-color: black; float: left;">
          <canvas id='canvas' width="640" height="100" style="background-color: #333333;"></canvas>
          <div id="controls">
            <button id="play">Play</button>
            <div id="scrubber"></div>
          </div>
        </div>  
      </div>
      <!-- Stats -->
      <div
        style="height: 480px; margin-top: 30px; margin-bottom: 10px; clear: both;">
        <table style="margin-top: 10px; width: 300;">
          <tr>
            <th>FPS</th>
            <td><span id='fps' style="color: red;"></span></td>
          </tr>
          <tr>
            <th>Average FPS (All / Steady)</th>
            <td><span id='fpsSinceStart' style="color: green;"></span> /
              <span id='fpsSinceSteady' style="color: green;"></span></td>
          </tr>
          <tr>
            <th>Elapsed</th>
            <td><span id='elapsed'></span></td>
          </tr>
          <tr>
            <th>Score</th>
            <td><span id='score' style="color: brown;"></span></td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>