ref: 8bf8b2e9a4963cb93ce511062752b2bd8a18c221
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="h264bsd_canvas.js"></script>
<!--<script src="min/h264bsd_canvas.min.js"></script> -->
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var pictureCount = 0;
var lastPictureCount = 0;
// Create the decoder and canvas
var decoder = new Worker('h264bsd_worker.js');
// var decoder = new Worker('min/h264bsd_worker.min.js');
var display = new H264bsdCanvas(canvas);
console.log('Created decoder and canvas');
decoder.addEventListener('error', function(e) {
console.log('Decoder error', e);
})
decoder.addEventListener('message', function(e) {
var message = e.data;
if (!message.hasOwnProperty('type')) return;
switch(message.type) {
case 'pictureParams':
croppingParams = message.croppingParams;
if(croppingParams === null) {
canvas.width = message.width;
canvas.height = message.height;
} else {
canvas.width = croppingParams.width;
canvas.height = croppingParams.height;
}
break;
case 'noInput':
var copy = new Uint8Array(buf);
decoder.postMessage({
'type' : 'queueInput',
'data' : copy.buffer
}, [copy.buffer]);
break;
case 'pictureReady':
display.drawNextOutputPicture(
message.width,
message.height,
message.croppingParams,
new Uint8Array(message.data));
++pictureCount;
break;
case 'decoderReady':
console.log('Decoder ready');
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) {
buf = new Uint8Array(e.target.result);
var copy = new Uint8Array(buf)
decoder.postMessage(
{'type' : 'queueInput', 'data' : copy.buffer},
[copy.buffer]);
setInterval(updateFpsCount, 1000);
console.log('Starting encode loop');
};
// Read in the image file as a data URL.
reader.readAsArrayBuffer(f);
}
document.getElementById('file').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>