shithub: h264bsd

ref: 164821c259bd23ef7b93a6541048bc977bf5783f
dir: /test/h264bsd.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" /><br/>
    <canvas id="canvas" width="640" height="480" style="border:solid;"></canvas>
    <h264decoder id="h264decoder"><h264decoder>
    <script src="../js/h264bsd_asm.js"></script>
    <script src="../js/sylvester.js"></script>
    <script src="../js/glUtils.js"></script>
    <script src="../js/util.js"></script>
    <script src="../js/canvas.js"></script>    
    <script src="../js/h264bsd.js"></script>
    <!--<script src="../js/dist/h264bsd.min.js"></script>-->
    <script type="text/javascript">
    	var canvas = document.getElementById('canvas');    	
    	var d = new H264Decoder(Module, canvas);
    	canvas.addEventListener("pictureReady", function(e){

			if (e.detail.picture == null){
				return;
			}
			if (e.detail.encoding != 'YUV'){
				return;
			}

			var bytes = e.detail.picture;			
			var width = e.detail.width;
			var height = e.detail.height;

			var wgc = new YUVWebGLCanvas(canvas, new Size(width, height));
				
			var lumaSize = width * height;
			var chromaSize = lumaSize >> 2;

		    wgc.YTexture.fill(bytes.subarray(0, lumaSize), true);
		    wgc.UTexture.fill(bytes.subarray(lumaSize, lumaSize + chromaSize), true);
		    wgc.VTexture.fill(bytes.subarray(lumaSize + chromaSize, lumaSize + 2 * chromaSize), true);
		    wgc.drawScene();

    	});

		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) {
				var buf = e.target.result;							
				d.decode(buf);			
			};

			// Read in the image file as a data URL.
			reader.readAsArrayBuffer(f);
		}		  

 		document.getElementById('file').addEventListener('change', handleFileSelect, false);
    </script>
</body>
</html>