shithub: h264bsd

ref: 77d2f0d7571f5f830177189e8ac370f49db99256
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="h264bsd.min.js"></script>    
    
       
    <!--<script src="h264bsd.min.js"></script>-->

    <script type="text/javascript">         
        var canvas = document.getElementById('canvas');             

        StatusCode = {};
        StatusCode.RDY = 0;
        StatusCode.PIC_RDY = 1;
        StatusCode.HDRS_RDY = 2;
        StatusCode.ERROR = 3;
        StatusCode.PARAM_SET_ERROR = 4;
        StatusCode.MEMALLOC_ERROR = 5;
        StatusCode.NO_INPUT = 1024;

        var pictureCount = 0;
        var lastPictureCount = 0;

        // Create the decoder and canvas
        var decoder = new Worker('h264bsd_decoder.min.js');
        var c = new H264bsdCanvas(canvas); 
        var croppingParams = null;
        var decoderWidth = null;
        var decoderHeight = null;

        console.log('Created decoder and canvas');

        decoder.addEventListener('message', function(e){
            if (e.data.hasOwnProperty('statusCode'))
            {
                var statusCode = e.data.statusCode;
                if (statusCode == StatusCode.HDRS_RDY) 
                {
                    croppingParams = e.data.croppingParams;
                    if(croppingParams === null) {
                        canvas.width = decoder.outputPictureWidth();
                        canvas.height = decoder.outputPictureHeight();
                    } else {
                        canvas.width = croppingParams.width;
                        canvas.height = croppingParams.height;
                    }

                    decoderWidth = e.data.decoderWidth;
                    decoderHeight = e.data.decoderHeight;
                }
                else if (statusCode == StatusCode.NO_INPUT)
                {
                    var copy = new Uint8Array(buf)
                    decoder.postMessage(copy.buffer, [copy.buffer])
                }
            }
            else
            {
                c.drawNextOutputPicture(decoderWidth, decoderHeight, croppingParams, new Uint8Array(e.data))
                ++pictureCount;
            }
        });



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