ref: 823d620f8315c94db90e029987e4a12771ed79f2
dir: h264bsd/js/test.html
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>h.264bsd test</title>
</head>
<body>
<input type="file" id="file" name="file" />
<span id="fps_display"></span>
<br/>
<!--This is where we will display decoded frames-->
<canvas id="canvas" width="640" height="480" style="border:solid;"></canvas>
<script src="../js/h264bsd_asm.js"></script>
<script src="../js/h264bsd_decoder.js"></script>
<script src="../js/h264bsd_canvas.js"></script>
<!--<script src="../js/h264bsd.min.js"></script>-->
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var pictureCount = 0;
var lastPictureCount = 0;
// Create the decoder and canvas
var d = new H264bsdDecoder(Module);
var c = new H264bsdCanvas(canvas);
console.log('Created decoder and canvas');
// Render for each picture
d.onPictureReady = function () {
c.drawNextOutputPicture(d);
++pictureCount;
}
// Render for each picture
d.onHeadersReady = function () {
canvas.width = d.outputPictureWidth();
canvas.height = d.outputPictureHeight();
}
// Loop with setTimeout delay to allow UI to update.
var loopBody = function() {
var retCode = d.decode();
//console.log('Decoded data. Return code: ', retCode, ' bytes remaining: ', d.inputBytesRemaining());
switch(retCode) {
case H264bsdDecoder.NO_INPUT:
//console.log('Decoding complete');
//d.release();
d.queueInput(buf);
setTimeout(loopBody, 0);
break;
default:
setTimeout(loopBody, 0);
break;
}
}
function updateFpsCount() {
var picturesSinceLastUpdate = pictureCount - lastPictureCount;
var fpsDisplay = document.getElementById('fps_display');
fps_display.innerHTML = 'FPS: ' + picturesSinceLastUpdate;
lastPictureCount = pictureCount;
}
var buf = null;
// Use the FileReader to get the bytes into the decoder
function handleFileSelect(evt) {
var f = evt.target.files[0]; // FileList object
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = function(e) {
console.log('Queueing file data...');
buf = e.target.result;
d.queueInput(buf);
setInterval(updateFpsCount, 1000);
console.log('Starting encode loop');
loopBody();
};
// Read in the image file as a data URL.
reader.readAsArrayBuffer(f);
}
document.getElementById('file').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>