PageRenderTime 200ms CodeModel.GetById 60ms app.highlight 80ms RepoModel.GetById 51ms app.codeStats 0ms

/Demo/broadway.html

http://github.com/mbebenita/Broadway
HTML | 342 lines | 296 code | 45 blank | 1 comment | 0 complexity | 6629aa1e70acce3e6520b12614d8ae4b MD5 | raw file
  1<!DOCTYPE html>
  2<html>
  3
  4<head>
  5<style>
  6/* MetaWebPro font family licensed from fontshop.com. WOFF-FTW! */
  7@font-face {
  8	font-family: 'MetaBlack';
  9	src: url('http://mozcom-cdn.mozilla.net/img/fonts/MetaWebPro-Black.eot');
 10	src: local('☺'),
 11		url('http://mozcom-cdn.mozilla.net/img/fonts/MetaWebPro-Black.woff')
 12		format('woff');
 13	font-weight: bold;
 14}
 15</style>
 16</head>
 17<body>
 18  <meta charset="utf-8">
 19
 20  <style>
 21
 22  #site-title {
 23    display: block;
 24    font: normal bold 60px/.738 MetaBlack, "Arial Black", sans-serif;
 25    letter-spacing: -0.02em;
 26  }
 27  
 28  #doc {
 29    margin: 0 auto;
 30    width: 1200px;
 31    padding: 10px;
 32  }
 33  
 34  #setting {
 35    margin-top: 10px;
 36  }
 37  
 38  #tagline {
 39    clear: both;
 40    font: 1.538em/1.4 Georgia, sans-serif;
 41    color: #484848;
 42    padding: 0 430px 0 0px;
 43  }
 44  
 45  body {
 46    font: normal 16px/.738 MetaBlack, "Arial Black", sans-serif;
 47  	color: #6D7581;
 48  }
 49  
 50  select {
 51    font: normal 16px "Arial", sans-serif;
 52    padding: 1px;
 53    color: #6D7581;
 54  }
 55  
 56  th {
 57  	text-align: left;
 58  	padding: 4px 4px 4px 12px;
 59  	background: no-repeat;
 60  }
 61  
 62  td {
 63  	padding-left: 8px;
 64  	text-align: right;
 65  }
 66  
 67  #controls {
 68    background-color: black;
 69    padding: 10px;
 70    height: 40px;
 71  }
 72  
 73  #play {
 74    width: 100px;
 75    float: left;
 76  }
 77  
 78  #scrubber {
 79    margin-left: 120px;
 80    margin-top: 12px;
 81    margin-right: 10px;
 82  }
 83  
 84  </style>
 85  
 86  <link type="text/css" href="jquery/theme/jquery-ui.css" rel="stylesheet" />
 87  <script type="text/javascript" src="jquery/jquery.min.js"></script>
 88  <script type="text/javascript" src="jquery/jquery-ui.min.js"></script>
 89
 90  <script type='text/javascript'>
 91    var Module = {
 92        noInitialRun : true
 93    };
 94  </script>
 95
 96  <script src="sylvester.js" type="text/javascript"></script>
 97  <script src="glUtils.js" type="text/javascript"></script>
 98  
 99  <script src='util.js' type='text/javascript'></script>
100  <script src='canvas.js' type='text/javascript'></script>
101  <script src='broadway.js' type='text/javascript'></script>
102
103  <script type="text/javascript">
104    $(function() {
105      $("#tabs").tabs();
106      $("#play").button();
107      $("#play").click(function() {
108          play();
109      });
110      
111      $( "#scrubber" ).slider({
112        range: false,
113        min: 0,
114        max: 500,
115        value: 0,
116        slide: function( event, ui ) {
117          var pos = ui.value / 500;
118          _setPosition(pos);
119        }
120    });
121      
122    });
123
124    var scoreCalculated = false;
125    var steadySampleCounter = 0;
126    var steadyFpsCounter = 0;
127
128    function updateStats(fps, fpsSinceStart, frames, elapsed) {
129        var steadyElapsedThreshold = 5;
130        if (elapsed > steadyElapsedThreshold) {
131          steadySampleCounter++;
132          steadyFpsCounter += fps;
133        }
134
135        document.getElementById('fps').innerHTML = fps.toFixed(2);
136        document.getElementById('fpsSinceStart').innerHTML = fpsSinceStart.toFixed(2);
137        document.getElementById('fpsSinceSteady').innerHTML = (steadyFpsCounter / steadySampleCounter).toFixed(2);
138        document.getElementById('elapsed').innerHTML = elapsed.toFixed(2);
139
140        var scoreTimeout = 60;
141        if (elapsed > scoreTimeout && scoreCalculated == false) {
142          scoreCalculated = true;
143          document.getElementById('score').innerHTML = fpsSinceStart.toFixed(2);
144        }
145        if (scoreCalculated == false) {
146          document.getElementById('score').innerHTML = "Calculating: " + (scoreTimeout - elapsed).toFixed(0);
147        }
148    }
149    
150      function load() {
151        document.getElementById('downloadProgress').innerHTML = "Downloading, Please Wait ...";
152        var clip = $("#clip").val();
153        var mode = $("#mode").val();
154        var xhr = new XMLHttpRequest();
155        xhr.open("GET", clip, false);
156        xhr.responseType = "arraybuffer";
157        xhr.send(null);
158        var arrayBuffer = xhr.response;
159        if (arrayBuffer) {
160          var byteArray = new Uint8Array(arrayBuffer);
161          var array = Array.prototype.slice.apply(byteArray);
162          Module.FS.createDataFile('/', 'video.264', array, true, false);
163        } else {
164          alert('load fail :(');
165        }
166        document.getElementById('downloadProgress').innerHTML = "Download Complete, Playing ...";
167
168        // Pass canvas and context to the generated code, and do the actual run() here
169        Module.canvas = document.getElementById('canvas');
170
171        if (mode == "none") {
172          _paint = function() {
173          };
174          _SDL_LockSurface = function() {
175          }
176        } else if (mode == "webgl") {
177          _paint = paint;
178          _SDL_LockSurface = function() {};
179          _SDL_Quit = function() {};
180        } else {
181          Module.ctx2D = Module.canvas.getContext('2d');
182          if (!Module.ctx2D) {
183            alert('Canvas not available :(');
184            return;
185          }
186        }
187
188        console.info("Running: " + clip);
189        Module.run(['video.264']);
190      }
191      
192      var loaded = false;
193      var playing = false;
194      
195      
196      function play() {
197        if (!loaded) {
198          load();
199          loaded = true;
200        }
201        
202        if (playing == false) {
203          $('#play').children().first().html("Pause");
204          playing = true;
205          Module.play();
206        } else {
207          $('#play').children().first().html("Play");
208          playing = false;
209          Module.stop();
210          return;
211        }
212      }
213
214      var webGLCanvas = null;
215
216      var videoFrameCounter = 0;
217      var windowFrameCounter = 0;
218      var videoStartTime;
219      var windowStartTime;
220      var scoreFrameCount = 1200;
221      
222      function onFrameDecoded() {
223        videoFrameCounter += 1;
224        windowFrameCounter += 1;
225        var now = Date.now();
226        if (!videoStartTime) {
227          videoStartTime = now;
228        }
229        var videoElapsedTime = now - videoStartTime;  
230        
231        if (!windowStartTime) {
232          windowStartTime = now;
233        } else if ((now - windowStartTime) > 1000) {
234          var windowElapsedTime = now - windowStartTime;
235          var fps = (windowFrameCounter / windowElapsedTime) * 1000;
236          document.getElementById('fps').innerHTML = fps.toFixed(2);
237          windowStartTime = now;
238          windowFrameCounter = 0;
239        }
240        
241        if (videoFrameCounter % 10 == 0) {
242          var fps = (videoFrameCounter / videoElapsedTime) * 1000;
243          document.getElementById('fpsSinceStart').innerHTML = fps.toFixed(2);
244        }
245        
246        if (!scoreCalculated) {
247          if (videoFrameCounter % 10 == 0) {
248            document.getElementById('score').innerHTML = "Calculating: " + (scoreFrameCount - videoFrameCounter);
249          }
250          
251          if (videoFrameCounter == scoreFrameCount) {
252            var fps = (videoFrameCounter / videoElapsedTime) * 1000;
253            document.getElementById('score').innerHTML = fps.toFixed(2);
254            scoreCalculated = true;
255          }
256        }
257      }
258      
259      function updateScrubber() {
260        $("#scrubber").slider('value', _getPosition() * 500);
261      }
262      
263      function paint($luma, $cb, $cr, width, height) {
264        if (!webGLCanvas) {
265          webGLCanvas = new YUVWebGLCanvas(Module.canvas, new Size(width, height));
266        }
267        var luma = HEAPU8.subarray($luma);
268        var cb = HEAPU8.subarray($cb);
269        var cr = HEAPU8.subarray($cr);
270        
271        webGLCanvas.YTexture.fill(luma);
272        webGLCanvas.UTexture.fill(cb);
273        webGLCanvas.VTexture.fill(cr);
274        webGLCanvas.drawScene();
275      }
276    </script>
277  
278
279  <div id="doc">
280    <header>
281      <h1 id="site-title"><b>Broadway.js</b></h1>
282      <p id="tagline">An H.264 Decoder in Pure JavaScript <a href="broadway-new.html">(Try New Codec)</a></p>
283    </header>
284    <div>
285      <div id="setting">
286        <span>Clip: 
287          <select id="clip" style="margin-left: 10px;">
288            <option value="mozilla.264">Mozilla</option>
289            <option value="admiral.264">Admiral</option>
290            <option value="matrix.264">Matrix SD</option>
291            <option value="matrix_large.264">Matrix HD</option>
292          </select>
293        </span>
294      </div>
295      <div id="setting">
296        <span>Render Mode: 
297          <select id="mode" style="margin-left: 10px;">
298            <option value="canvas">Canvas</option>
299            <option value="webgl">Canvas w/ WebGL</option>
300            <option value="none">None</option> 
301          </select> 
302        </span>
303        <span style="margin-left: 10px; border: 0px" id="downloadProgress"></span>
304      </div>
305      <div id="setting">
306        <div style="margin-left: 10px; border: 0px; clear: both;" id="downloadProgress"></div>
307      </div>
308      <div>
309        <div id="player" style="background-color: black; float: left;">
310          <canvas id='canvas' width="640" height="100" style="background-color: #333333;"></canvas>
311          <div id="controls">
312            <button id="play">Play</button>
313            <div id="scrubber"></div>
314          </div>
315        </div>  
316      </div>
317      <!-- Stats -->
318      <div
319        style="height: 480px; margin-top: 30px; margin-bottom: 10px; clear: both;">
320        <table style="margin-top: 10px; width: 300;">
321          <tr>
322            <th>FPS</th>
323            <td><span id='fps' style="color: red;"></span></td>
324          </tr>
325          <tr>
326            <th>Average FPS (All / Steady)</th>
327            <td><span id='fpsSinceStart' style="color: green;"></span> /
328              <span id='fpsSinceSteady' style="color: green;"></span></td>
329          </tr>
330          <tr>
331            <th>Elapsed</th>
332            <td><span id='elapsed'></span></td>
333          </tr>
334          <tr>
335            <th>Score</th>
336            <td><span id='score' style="color: brown;"></span></td>
337          </tr>
338        </table>
339      </div>
340    </div>
341  </body>
342</html>