shithub: h264bsd

ref: ccbde503b2ccffdcd94dbadd7d03d045abed3fe1
dir: /wasm/test.html/

View raw version 
<!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>