<!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 decode loop');            };             // Read in the image file as a data URL.            reader.readAsArrayBuffer(f);        }         document.getElementById('file').addEventListener('change', handleFileSelect, false);    </script></body></html>