PageRenderTime 48ms CodeModel.GetById 27ms app.highlight 17ms RepoModel.GetById 1ms app.codeStats 0ms

/Demo/broadway-new.html

http://github.com/mbebenita/Broadway
HTML | 231 lines | 207 code | 23 blank | 1 comment | 0 complexity | 7a488d08948a27f02efbb157a6091d7a MD5 | raw file
  1<!DOCTYPE html>
  2<html>
  3<head>
  4  <link type="text/css" href="screen.css" rel="stylesheet" />
  5  <link type="text/css" href="jquery/theme/jquery-ui.css" rel="stylesheet" />
  6</head>
  7<body>
  8  <script type="text/javascript" src="jquery/jquery.min.js"></script>
  9  <script type="text/javascript" src="jquery/jquery-ui.min.js"></script>
 10  <script type='text/javascript'>
 11    var Module = {
 12        noInitialRun : true
 13    };
 14  </script>
 15  
 16  <script src="sylvester.js" type="text/javascript"></script>
 17  <script src="glUtils.js" type="text/javascript"></script>
 18  <script src='util.js' type='text/javascript'></script>
 19  <script src='canvas.js' type='text/javascript'></script>
 20  <script src='broadway-new.js' type='text/javascript'></script>
 21
 22  <script type="text/javascript">
 23    $(function() {
 24      $("#tabs").tabs();
 25      $("#play").button();
 26      $("#play").click(function() {
 27        play();
 28      });
 29      
 30      $( "#scrubber" ).slider({
 31        range: false,
 32        min: 0,
 33        max: 500,
 34        value: 0,
 35        slide: function( event, ui ) {
 36          var pos = ui.value / 500;
 37          _setPosition(pos);
 38        }
 39      });
 40    });
 41
 42    function load() {
 43      document.getElementById('downloadProgress').innerHTML = "Downloading, Please Wait ...";
 44      var clip = $("#clip").val();
 45      var mode = $("#mode").val();
 46      var xhr = new XMLHttpRequest();
 47      xhr.open("GET", clip, false);
 48      xhr.responseType = "arraybuffer";
 49      xhr.send(null);
 50      var arrayBuffer = xhr.response;
 51      if (arrayBuffer) {
 52        var byteArray = new Uint8Array(arrayBuffer);
 53        var array = Array.prototype.slice.apply(byteArray);
 54        Module.FS.createDataFile('/', 'video.264', array, true, false);
 55      } else {
 56        alert('load fail :(');
 57      }
 58      document.getElementById('downloadProgress').innerHTML = "Download Complete, Playing ...";
 59
 60      // Pass canvas and context to the generated code, and do the actual run() here
 61      Module.canvas = document.getElementById('canvas');
 62
 63      if (mode == "none") {
 64        Module.paint = function() {}; 
 65      } else if (mode == "webgl") {
 66        Module.paint = webGLPaint;
 67      } else {
 68        Module.ctx2D = Module.canvas.getContext('2d');
 69        if (!Module.ctx2D) {
 70          alert('Canvas not available :(');
 71          return;
 72        }
 73      }
 74      
 75      console.info("Running: " + clip);
 76      Module.run(['video.264']);
 77    }
 78    
 79    var loaded = false;
 80    var playing = false;
 81    
 82    function play() {
 83      if (!loaded) {
 84        load();
 85        loaded = true;
 86      }
 87      
 88      if (playing == false) {
 89        $('#play').children().first().html("Pause");
 90        playing = true;
 91        Module.play();
 92      } else {
 93        Module['CorrectionsMonitor'].print();
 94        
 95        $('#play').children().first().html("Play");
 96        playing = false;
 97        Module.stop();
 98        return;
 99      }
100    }
101
102    var webGLCanvas = null;
103
104    var videoFrameCounter = 0;
105    var windowFrameCounter = 0;
106    var videoStartTime;
107    var windowStartTime;
108    var scoreFrameCount = 1200;
109    var scoreCalculated = false;
110    
111    Module.onFrameDecoded = function() {
112      videoFrameCounter += 1;
113      windowFrameCounter += 1;
114      var now = Date.now();
115      if (!videoStartTime) {
116        videoStartTime = now;
117      }
118      var videoElapsedTime = now - videoStartTime;  
119      
120      if (!windowStartTime) {
121        windowStartTime = now;
122      } else if ((now - windowStartTime) > 1000) {
123        var windowElapsedTime = now - windowStartTime;
124        var fps = (windowFrameCounter / windowElapsedTime) * 1000;
125        document.getElementById('fps').innerHTML = fps.toFixed(2);
126        windowStartTime = now;
127        windowFrameCounter = 0;
128      }
129      
130      if (videoFrameCounter % 10 == 0) {
131        var fps = (videoFrameCounter / videoElapsedTime) * 1000;
132        document.getElementById('fpsSinceStart').innerHTML = fps.toFixed(2);
133      }
134      
135      if (!scoreCalculated) {
136        if (videoFrameCounter % 10 == 0) {
137          document.getElementById('score').innerHTML = "Calculating: " + (scoreFrameCount - videoFrameCounter);
138        }
139        
140        if (videoFrameCounter == scoreFrameCount) {
141          var fps = (videoFrameCounter / videoElapsedTime) * 1000;
142          document.getElementById('score').innerHTML = fps.toFixed(2);
143          scoreCalculated = true;
144        }
145      }
146    }
147    
148    function updateScrubber() {
149      $("#scrubber").slider('value', _getPosition() * 500);
150    }
151    
152    function webGLPaint($luma, $cb, $cr, width, height) {
153      if (!webGLCanvas) {
154        webGLCanvas = new YUVWebGLCanvas(Module.canvas, new Size(width, height));
155      }
156      var luma = Module.HEAPU8.subarray($luma);
157      var cb = Module.HEAPU8.subarray($cb);
158      var cr = Module.HEAPU8.subarray($cr);
159      
160      webGLCanvas.YTexture.fill(luma);
161      webGLCanvas.UTexture.fill(cb);
162      webGLCanvas.VTexture.fill(cr);
163      webGLCanvas.drawScene();
164    }
165  </script>
166  
167
168  <div id="doc">
169    <header>
170      <h1 id="site-title"><b>Broadway.js (NEW)</b></h1>
171      <p id="tagline">An H.264 Decoder in Pure JavaScript <a href="broadway.html">(Try Old Codec)</a></p>
172    </header>
173    <div>
174      <div id="setting">
175        <span>Clip: 
176          <select id="clip" style="margin-left: 10px;">
177            <option value="mozilla.264">Mozilla</option>
178            <option value="admiral.264">Admiral</option>
179            <option value="matrix.264">Matrix SD</option>
180            <option value="matrix_large.264">Matrix HD</option>
181          </select>
182        </span>
183      </div>
184      <div id="setting">
185        <span>Render Mode: 
186          <select id="mode" style="margin-left: 10px;">
187            <option value="canvas">Canvas</option>
188            <option value="webgl">Canvas w/ WebGL</option>
189            <option value="none">None</option> 
190          </select> 
191        </span>
192        <span style="margin-left: 10px; border: 0px" id="downloadProgress"></span>
193      </div>
194      <div id="setting">
195        <div style="margin-left: 10px; border: 0px; clear: both;" id="downloadProgress"></div>
196      </div>
197      <div>
198        <div id="player" style="background-color: black; float: left;">
199          <canvas id='canvas' width="640" height="100" style="background-color: #333333;"></canvas>
200          <div id="controls">
201            <button id="play">Play</button>
202            <div id="scrubber"></div>
203          </div>
204        </div>  
205      </div>
206      <!-- Stats -->
207      <div
208        style="height: 480px; margin-top: 30px; margin-bottom: 10px; clear: both;">
209        <table style="margin-top: 10px; width: 300;">
210          <tr>
211            <th>FPS</th>
212            <td><span id='fps' style="color: red;"></span></td>
213          </tr>
214          <tr>
215            <th>Average FPS (All / Steady)</th>
216            <td><span id='fpsSinceStart' style="color: green;"></span> /
217              <span id='fpsSinceSteady' style="color: green;"></span></td>
218          </tr>
219          <tr>
220            <th>Elapsed</th>
221            <td><span id='elapsed'></span></td>
222          </tr>
223          <tr>
224            <th>Score</th>
225            <td><span id='score' style="color: brown;"></span></td>
226          </tr>
227        </table>
228      </div>
229    </div>
230  </body>
231</html>