Files
UnrealEngineUWP/Engine/Source/Programs/PixelStreaming/WebServers/SignallingWebServer/public/player.html
Marc Audy e80ea6b959 Merge from Release-Engine-Staging @ 16444985
This represents UE4/Main @ 16445039 and Dev-PerfTest @ 16444526

[CL 16445122 by Marc Audy in ue5-release-engine-test branch]
2021-05-25 02:43:26 -04:00

112 lines
4.4 KiB
HTML

<!-- Copyright Epic Games, Inc. All Rights Reserved. -->
<!DOCTYPE HTML>
<html>
<head>
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
<link rel="icon" type="image/png" sizes="96x96" href="/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
<link type="text/css" rel="stylesheet" href="player.css">
<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script type="text/javascript" src="scripts/webRtcPlayer.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
</head>
<body onload="load()">
<div id="playerUI">
<div id="player"></div>
<div id="overlay" class="overlay text-light bg-dark">
<div>
<div id="qualityStatus" class="greyStatus">&#9679</div>
<div id="overlayButton">+</div>
</div>
<div id="overlaySettings">
<div id="KickOthers">
<div class="settings-text">Kick all other players</div>
<label class="btn-overlay">
<input type="button" id="kick-other-players-button" class="overlay-button btn-flat" value="Kick">
</label>
</div>
<div id="FillWindow">
<div class="settings-text">Enlarge Display to Fill Window</div>
<label class="tgl-switch">
<input type="checkbox" id="enlarge-display-to-fill-window-tgl" class="tgl tgl-flat" checked>
<div class="tgl-slider"></div>
</label>
</div>
<div id="QualityControlOwnership">
<div class="settings-text">Quality control ownership</div>
<label class="tgl-switch">
<input type="checkbox" id="quality-control-ownership-tgl" class="tgl tgl-flat">
<div class="tgl-slider"></div>
</label>
</div>
<div id="PrioritiseQuality">
<div class="settings-text">Prioritise Quality</div>
<label class="tgl-switch">
<input type="checkbox" id="prioritise-quality-tgl" class="tgl tgl-flat" data-toggle="collapse" href="#qualityParamsContainer">
<div class="tgl-slider"></div>
</label>
<div id="qualityParamsContainer" class="collapse">
<div class="form-group">
<label for="low-bitrate-text">Low Bitrate (kbps)</label>
<input type="number" class="form-control" id="low-bitrate-text" value="2000" min="0" max="100000" />
<label for="high-bitrate-text">High Bitrate (kbps)</label>
<input type="number" class="form-control" id="high-bitrate-text" value="10000" min="0" max="100000" />
<label for="min-fps-text">Min FPS</label>
<input type="number" class="form-control" id="min-fps-text" value="10" min="1" max="120" />
<input id="quality-params-submit" class="btn btn-primary btn-lg mt-3" type="button" value="Apply">
</div>
</div>
</div>
<div id="RateControlContainer">
<div class="settings-text">Rate Control</div>
<label class="tgl-switch">
<select id="rate-control-dropdown">
<option value="CBR" selected>CBR</option>
<option value="VBR">VBR</option>
<option value="ConstQP">ConstQP</option>
</select>
</label>
</div>
<div id="MinQPContainer">
<div class="settings-text">Qual control (0=max qual/br)</div>
<label class="tgl-switch">
<input type="number" id="minqp-number" value="21" min="0" max="51">
</label>
</div>
<div id="ShowFPS">
<div class="settings-text">Show FPS</div>
<label class="btn-overlay">
<input type="button" id="show-fps-button" class="overlay-button btn-flat" value="Toggle">
</label>
</div>
<div id="MatchViewportResolution">
<div class="settings-text">Match Viewport Resolution</div>
<label class="tgl-switch">
<input type="checkbox" id="match-viewport-res-tgl" class="tgl tgl-flat">
<div class="tgl-slider"></div>
</label>
</div>
<div id="Stats">
<div class="settings-text">Show Stats</div>
<label class="tgl-switch">
<input type="checkbox" id="show-stats-tgl" class="tgl tgl-flat" checked>
<div class="tgl-slider"></div>
</label>
<div id="statsContainer" class="statsContainer">
<div id="stats" class="stats"></div>
</div>
</div>
<div id="LatencyTest">
<Button onclick="sendStartLatencyTest()">Test Latency</Button>
<div id="LatencyStatsContainer" class="statsContainer">
<div id=LatencyStats class="stats">No stats yet...</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>