opentok-network-test-js
Version:
Precall network test for applications using the OpenTok platform.
103 lines (100 loc) • 3.22 kB
HTML
<html>
<head>
<script type="text/javascript" src="https://static.opentok.com/v2/js/opentok.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/styles.css" rel="stylesheet">
</head>
<body>
<h1>OpenTok <small>Network test</small></h1>
<div id="precall" class="prettyBox">
<div class="options">
Options:
<span>
<input id="audioOnlyCheckbox" type="checkbox"> <label>Audio-only</label>
<input id="scalableCheckbox" type="checkbox" checked> <label>Scalable-video</label>
<input id="fullHdCheckbox" type="checkbox"> <label>Full HD</label>
</span>
<span>
Maximum duration:
<select>
<option>30</option>
<option>25</option>
<option>20</option>
<option>15</option>
<option>10</option>
<option>5</option>
</select>
</span>
</div>
<button>Start test</button>
</div>
<div id="connectivity_status_container" class="prettyBox">
<h2>Testing connectivity</h2>
<p>Test in progress.</p>
<img src="assets/spinner.gif">
</div>
<div id="quality_status_container" class="prettyBox">
<div id="quality_header">
<h2>Testing quality</h2>
<p>Test in progress.</p>
<img src="assets/spinner.gif">
<button id="stop_test">Stop test</button>
</div>
<div>
<div id="audio">
<h3>Audio</h3>
<div>
<div class="results">
<p>Supported:
<span id="audio-supported"></span>
</p>
<p>Quality:
<span id="audio-mos"></span>
</p>
<p>Bitrate:
<span id="audio-bitrate"></span>
</p>
<p>Packet loss ratio:
<span id="audio-plr"></span>
</p>
</div>
<div id="audioGraph" class="graph"></div>
</div>
</div>
<div id="video">
<h3>Video</h3>
<div>
<div class="results">
<p>Supported:
<span id="video-supported"></span>
<p id="video-unsupported-reason">Reason:
<span></span>
</p>
<p>Quality:
<span id="video-mos"></span>
</p>
<p>Video limitation:
<span id="video-qualityLimitationReason"></span>
</p>
<p>Bitrate:
<span id="video-bitrate"></span>
</p>
<p>Packet loss ratio:
<span id="video-plr"></span>
</p>
<p>Recommended resolution:
<span id="video-recommendedResolution"></span>
</p>
<p>Recommended frame rate:
<span id="video-recommendedFrameRate"></span>
</p>
</div>
<div id="videoGraph" class="graph"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>