topical media & game development
mobile-query-three-plugins-whammy-examples-index.htm / htm
<!doctype html><title>Minimal tQuery Page</title>
<script src="../../../build/tquery-bundle-require.js"></script>
<script src="../vendor/whammy.js"></script>
<script src="../tquery.whammy.js"></script>
<script src="../tquery.whammy.bindkeyboard.js"></script>
<body><div id="info">
<div style='font-size:130%'>
Live Video Encoding *In-Browser*
with <a href='github.com/antimatter15/whammy' target='_blank'>whammy.js</a>
</div>
Press 'r' to start/stop recording a video<br/>
Recorder <span class='status'>idle</span>
<a style="display:none" target="_blank" class="download" download="movie.webm">Download</a>
</div><script>
var world = tQuery.createWorld().boilerplate().pageTitle('#info').start();
var object = tQuery.createTorus().addTo(world);
var recorder = tQuery.createWhammy().bindKeyboard();
/////////////////////////////////////////////////////////////////
// example of reporter
var container = document.querySelector('#info');
var statusEl = container.querySelector('.status');
var downloadEl = container.querySelector('.download');
var timeBefore = null;
var timeAfter = null;
recorder.addEventListener('postStart', function(){
statusEl.textContent = 'processing...';
}.bind(this));
recorder.addEventListener('preStop', function(){
// measure time *before* stop
timeBefore = Date.now();
}.bind(this))
recorder.addEventListener('postStop', function(){
// measure time *after* stop
timeAfter = Date.now();
// init download link
downloadEl.href = recorder.finalizedURL();
downloadEl.style.display = ''
// update status element
var statusText = "compiled a " + Math.ceil(recorder.output().size / 1024) + "KB video";
statusText += " in " + (timeAfter - timeBefore) + "ms"
statusEl.innerHTML = statusText;
}.bind(this))
</script></body>
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.