index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Live Chat</title>
	<style>
	#video, canvas {
		max-width: 500px;
	    transform: rotateY(180deg);
	    -webkit-transform:rotateY(180deg); 
	    -moz-transform:rotateY(180deg); 
	}

	#capture {
		max-width: 300px;
	}
	</style>
</head>
<body>
	<header>
		<h1>Live Chat</h1>
		<nav>
			<form id="join" action="">
				<input type="text" name="username" placeholder="username" required>
				<button type="submit">join</button>
			</form>
		</nav>
	</header>
	<div class="container">
		<div>
			<ul id="userList"></ul>
		</div>
		<div>
			<video id="video" autoplay></video>
		</div>
		<canvas id="capture"></canvas>

		<ul id="videoList"></ul>

	</div>
	<footer>
		copyright: mit license
	</footer>

	<script src="dist/bundle.js"></script>
</body>
</html>