<h1 class="page-header">Camera Monitor</h1>

<style>
    .monitor-view {
        width: 100%;
        height: 600px;
    }
</style>

<table class="monitor-view">
    <tr>
        <td>
            <video id="view1" class="video-js vjs-fill" preload="auto" data-setup='{}' controls autoplay muted >
                <source src="{{stream1}}">
                <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading to a web browser that
                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video.</a>
                </p>
            </video>
        </td>

        <td>
            <video id="view2" class="video-js vjs-fill" preload="auto" data-setup='{}' controls autoplay muted >
                <source src="{{stream2}}">
            </video>
        </td>
    </tr>

    <tr>
        <td>
            <video id="view3" class="video-js vjs-fill" preload="auto" data-setup='{}' controls autoplay muted >
                <source src="{{stream3}}">
            </video>
        </td>

        <td>
            <video id="view4" class="video-js vjs-fill" preload="auto" data-setup='{}' controls autoplay muted >
                <source src="{{stream4}}">
            </video>
        </td>
    </tr>
</table>

<link href="css/video-js.min.css" rel="stylesheet">
<script src="js/video.min.js"></script>
<script src="js/videojs-http-streaming.min.js"></script>