shithub: h264bsd

ref: 6b542d68181923c61c0fd184b5b40e199630cc89
dir: /js/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="../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>