<!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 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 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>