SrcWeb/index.html

<html>
<head>
<!-- https://developer.chrome.com/origintrials/#/registration/2591117898109943809 -->
<!-- Poph264.com -->
<meta http-equiv="origin-trial" content="As+RA7ISoI5HqCw9lH0U8uRMl8rrpbB2ikHlsJxvkkpgT7DDJ2BO59WzkhMkGuhV1Xo4G7tE7vDiY7SPSa0fuQ0AAABheyJvcmlnaW4iOiJodHRwczovL3BvcGgyNjQuY29tOjQ0MyIsImZlYXR1cmUiOiJXZWJDb2RlY3MiLCJleHBpcnkiOjE2MjYyMjA3OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" />
<!-- locahost:80 -->
<meta http-equiv="origin-trial" content="AkeQb/neRyNMG2Bl3pwkp7eHu4Jew+QpASAt0AIm8APWTBs0igK3gFYmuoB78eHlfnrkw+1iBBDR126/0M4OxwkAAABKeyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0OjgwIiwiZmVhdHVyZSI6IldlYkNvZGVjcyIsImV4cGlyeSI6MTYyNjIyMDc5OX0=" />
<!-- locahost:8008 -->
<meta http-equiv="origin-trial" content="Amw746zqUkwtRtAM0l0UPaCiceQqxz2frbE7P3+uwCbs/niY/AyABItpOvPzitXzScjT7kriDTkUJ9zyxQkamQoAAABMeyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0OjgwMDgiLCJmZWF0dXJlIjoiV2ViQ29kZWNzIiwiZXhwaXJ5IjoxNjI2MjIwNzk5fQ==" />

<style>
#Error
{
	background:		#f99;
	color:			#fff;
	font-size:		10vmin;
	font-weight:	heavy;
	font-family:	sans-serif;
	padding:		3vmin;
	text-align:		center;
}

#Error:empty
{
	display:	none;
}
</style>

</head>
<body>
<div id=Error></div>
<canvas />

<script type=module>
import * as PopH264 from './PopH264.js'

function OnError(Error)
{
	const Box = document.querySelector('#Error');
	Box.innerText = Error;
}

async function DecodeTestData()
{
	const H264Data = PopH264.GetTestData('RainbowGradient.h264');
	const Decoder = PopH264.CreateDecoder();
	Decoder.PushData(H264Data,0);
	
	const Canvas = document.querySelector('canvas');
	const CanvasContext = Canvas.getContext('2d');

	while ( true )
	{
		const NewFrame = await Decoder.WaitForNextFrame();
		console.log(`NewFrame: `, NewFrame);
		
		//	html5 lets us draw straight to canvases
		CanvasContext.drawImage(NewFrame,0,0);
	}
}
DecodeTestData().catch(OnError);

</script>
</body>
</html>