<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Mjpeg Player</title>
    <script type="text/javascript" src="main.js"></script>
    <script type="module" src="player.js"></script>
</head>

<body style="height: 100%">
    <div class="card m-auto" style="width: 40rem;">
        <div class="card-body">
            <div class="container-fluid">
                <div class="form-group">
                    <input class="form-control-file" type="file" id="fileinput" onchange="play();">
                </div>
            </div>
            <div class="container-fluid">
                Frame Rate: <input type="text" id="rate" class="mb-3 mx-3" value="30"> fps
            </div>
            <div class="container-fluid">
                <img src="" id="viewer" style="max-width:100%; height:auto;">
            </div>
        </div>
    </div>
    <footer id="sticky-footer" class="footer fixed-bottom py-4 bg-dark text-white-50" style="width: 100%;">
        <div class="container text-center">
            <small>&copy;2019 Australian Ocean Laboratory Limited (AusOcean) (<a rel="license" href="https://www.ausocean.org/license">License</a>)</small>
        </div>
    </footer>
</body>

</html>