tiantanlin
/
SHDJ


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
							<!-- 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 rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Michroma&family=Montserrat:wght@600&display=swap" rel="stylesheet">
	<link type="text/css" rel="stylesheet" href="player.css">
	<script type="text/javascript">
		// This horrible hack is to make Fippo's adapter-latest.js work with Firefox when not on https
		// because FF does not let you access navigator.mediaDevices when on http.
		var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
		if (isFirefox) {
			window.navigator.mozGetUserMedia = function () { };
			if (window.navigator.mediaDevices === undefined) {
				navigator.mediaDevices = {};
				navigator.mediaDevices.getSupportedConstraints = function () { return {}; };
				navigator.mediaDevices.getUserMedia = function () { return {}; };
			}
		}
	</script>
	<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" class="noselect">
		<div id="player"></div>
		<div id="overlay">
			<div id="controls">
				<button class="tooltip" onclick="fullscreen()" id="fullscreen-btn">
					<object data="images/Minimize.svg" type="image/svg+xml" id="minimize"></object>
					<object data="images/Maximize.svg" type="image/svg+xml" id="maximize"></object>
					<span class="tooltiptext">Fullscreen</span>
				</button>
				<button class="tooltip" id="settingsBtn">
					<object data="images/Settings.svg" type="image/svg+xml"></object>
					<span class="tooltiptext">Settings</span>
				</button>
				<button class="tooltip" id="statsBtn">
					<object data="images/Info.svg" type="image/svg+xml"></object>
					<span class="tooltiptext">Information</span>
				</button>
				
			</div>
			<div id="unrealengine">
				<p></p>
				<svg viewBox="0 0 1204.105 74.011" xmlns="http://www.w3.org/2000/svg">
					<g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#ffffff" stroke-width="0.25mm" fill="#ffffff" style="stroke:#ffffff;stroke-width:0.25mm;fill:#ffffff">
						<path d="M 894.605 74.006 L 921.305 74.006 C 942.427 74.006 953.413 73.292 956.313 60.527 A 37.848 37.848 0 0 0 957.105 52.206 L 957.105 31.606 L 907.305 31.606 L 907.305 46.606 L 934.905 46.606 L 934.905 48.706 C 934.905 53.442 932.251 55.385 928.738 56.147 A 26.156 26.156 0 0 1 923.305 56.606 L 899.605 56.606 A 39.408 39.408 0 0 1 894.638 56.344 C 888.593 55.565 886.231 52.853 885.654 45.747 A 52.88 52.88 0 0 1 885.505 41.506 L 885.505 32.506 A 48.028 48.028 0 0 1 885.738 27.377 C 886.556 19.865 889.695 17.689 897.793 17.433 A 57.321 57.321 0 0 1 899.605 17.406 L 923.705 17.406 A 38.323 38.323 0 0 1 927.889 17.588 C 932.328 18.085 934.835 19.818 934.904 25.273 A 18.461 18.461 0 0 1 934.905 25.506 L 956.705 25.506 L 956.705 23.206 A 36.235 36.235 0 0 0 955.47 12.587 C 953.178 5.214 946.987 0.624 931.363 0.064 A 93.813 93.813 0 0 0 928.005 0.006 L 894.605 0.006 C 874.839 0.006 862.985 4.89 862.71 25.469 A 55.259 55.259 0 0 0 862.705 26.206 L 862.705 47.806 A 39.6 39.6 0 0 0 863.741 57.358 C 866.906 70.059 877.192 73.722 892.685 73.99 A 111.289 111.289 0 0 0 894.605 74.006 Z M 323.405 73.206 L 403.905 73.206 L 403.905 55.806 L 345.605 55.806 L 345.605 44.206 L 399.605 44.206 L 399.605 29.206 L 345.605 29.206 L 345.605 17.606 L 402.605 17.606 L 402.605 0.806 L 323.405 0.806 L 323.405 73.206 Z M 656.905 73.206 L 737.405 73.206 L 737.405 55.806 L 679.105 55.806 L 679.105 44.206 L 733.105 44.206 L 733.105 29.206 L 679.105 29.206 L 679.105 17.606 L 736.105 17.606 L 736.105 0.806 L 656.905 0.806 L 656.905 73.206 Z M 1123.605 73.206 L 1204.105 73.206 L 1204.105 55.806 L 1145.805 55.806 L 1145.805 44.206 L 1199.805 44.206 L 1199.805 29.206 L 1145.805 29.206 L 1145.805 17.606 L 1202.805 17.606 L 1202.805 0.806 L 1123.605 0.806 L 1123.605 73.206 Z M 106.205 73.206 L 128.405 73.206 L 128.405 20.606 L 128.605 20.606 L 170.305 73.206 L 204.705 73.206 L 204.705 0.806 L 182.505 0.806 L 182.505 53.406 L 182.305 53.406 L 140.605 0.806 L 106.205 0.806 L 106.205 73.206 Z M 750.805 73.206 L 773.005 73.206 L 773.005 20.606 L 773.205 20.606 L 814.905 73.206 L 849.305 73.206 L 849.305 0.806 L 827.105 0.806 L 827.105 53.406 L 826.905 53.406 L 785.205 0.806 L 750.805 0.806 L 750.805 73.206 Z M 1010.105 73.206 L 1032.305 73.206 L 1032.305 20.606 L 1032.505 20.606 L 1074.205 73.206 L 1108.605 73.206 L 1108.605 0.806 L 1086.405 0.806 L 1086.405 53.406 L 1086.205 53.406 L 1044.505 0.806 L 1010.105 0.806 L 1010.105 73.206 Z M 29.705 74.006 L 61.505 74.006 A 51.732 51.732 0 0 0 72.484 72.955 C 82.691 70.728 88.531 64.939 90.473 55.381 A 40.134 40.134 0 0 0 91.205 47.406 L 91.205 0.806 L 69.005 0.806 L 69.005 42.606 C 69.005 51.405 65.987 55.082 57.762 55.385 A 31.364 31.364 0 0 1 56.605 55.406 L 34.605 55.406 A 22.943 22.943 0 0 1 30.082 55.013 C 24.736 53.93 22.488 50.538 22.231 43.95 A 34.441 34.441 0 0 1 22.205 42.606 L 22.205 0.806 L 0.005 0.806 L 0.005 47.406 C 0.005 64.841 8.73 73.457 27.816 73.981 A 68.853 68.853 0 0 0 29.705 74.006 Z M 219.705 73.206 L 241.905 73.206 L 241.905 54.406 L 276.805 54.406 A 18.122 18.122 0 0 1 280.084 54.663 C 284.425 55.469 285.905 58.272 285.905 64.506 L 285.905 73.206 L 308.105 73.206 L 308.105 60.906 C 308.105 49.006 302.605 46.106 296.005 44.906 L 296.005 44.706 A 22.978 22.978 0 0 0 300.937 43.003 C 305.503 40.745 307.44 37.183 308.108 32.151 A 40.124 40.124 0 0 0 308.405 26.906 L 308.405 22.306 A 33.46 33.46 0 0 0 307.248 12.853 C 305.018 5.341 299.196 0.806 286.705 0.806 L 219.705 0.806 L 219.705 73.206 Z M 410.205 73.206 L 435.005 73.206 L 441.505 60.406 L 486.505 60.406 L 493.405 73.206 L 518.105 73.206 L 478.305 0.806 L 449.405 0.806 L 410.205 73.206 Z M 526.005 73.206 L 598.105 73.206 L 598.105 54.606 L 548.205 54.606 L 548.205 0.806 L 526.005 0.806 L 526.005 73.206 Z M 971.705 73.206 L 993.905 73.206 L 993.905 0.806 L 971.705 0.806 L 971.705 73.206 Z M 241.905 18.806 L 276.605 18.806 A 34.237 34.237 0 0 1 280.146 18.959 C 283.795 19.344 285.876 20.558 286.556 23.711 A 12.861 12.861 0 0 1 286.805 26.406 L 286.805 28.806 A 12.128 12.128 0 0 1 286.485 31.774 C 285.685 34.926 283.316 36.406 278.605 36.406 L 241.905 36.406 L 241.905 18.806 Z M 463.805 17.606 L 478.205 44.806 L 449.805 44.806 L 463.805 17.606 Z"/>
					</g>
				</svg>
			</div>
			<div id="connection" class="tooltip">
				<svg version="1.1" id="connectionStrength" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 				viewBox="0 0 494.45 494.45" style="enable-background:new 0 0 494.45 494.45;" xml:space="preserve">
					<circle id="dot" cx="247.125" cy="398.925" r="35.3"/>

					<path id="middle" d="M395.225,277.325c-6.8,0-13.5-2.6-18.7-7.8c-71.4-71.3-187.4-71.3-258.8,0c-10.3,10.3-27.1,10.3-37.4,0
						s-10.3-27.1,0-37.4c92-92,241.6-92,333.6,0c10.3,10.3,10.3,27.1,0,37.4C408.725,274.725,401.925,277.325,395.225,277.325z"/>

					<path id="outer" d="M467.925,204.625c-6.8,0-13.5-2.6-18.7-7.8c-111.5-111.4-292.7-111.4-404.1,0c-10.3,10.3-27.1,10.3-37.4,0
						s-10.3-27.1,0-37.4c64-64,149-99.2,239.5-99.2s175.5,35.2,239.5,99.2c10.3,10.3,10.3,27.1,0,37.4
						C481.425,202.025,474.625,204.625,467.925,204.625z"/>

					<path id="inner" d="M323.625,348.825c-6.8,0-13.5-2.6-18.7-7.8c-15.4-15.4-36-23.9-57.8-23.9s-42.4,8.5-57.8,23.9
						c-10.3,10.3-27.1,10.3-37.4,0c-10.3-10.3-10.3-27.1,0-37.4c25.4-25.4,59.2-39.4,95.2-39.4s69.8,14,95.2,39.5
						c10.3,10.3,10.3,27.1,0,37.4C337.225,346.225,330.425,348.825,323.625,348.825z"/>

					

					
				</svg>
				<span class="tooltiptext" id="qualityText">Not connected</span>
			</div>
			<div class="panel-wrap" id="settings-panel">
				<div class="panel">
					<div id="heading">Settings</div>
					<div id="close" onclick="settingsClicked()"></div>
					<div id="content">
						<div id="fillWindow" class="setting">
							<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" class="setting">
							<div class="settings-text">Is quality controller?</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="matchViewportResolution" class="setting">
							<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="offerToReceive" class="setting">
							<div class="settings-text">Offer To Receive</div>
							<label class="tgl-switch">
								<input type="checkbox" id="offer-receive-tgl" class="tgl tgl-flat">
								<div class="tgl-slider"></div>
							</label>
						</div>
						<div id="preferSFU" class="setting">
							<div class="settings-text">Prefer SFU</div>
							<label class="tgl-switch">
								<input type="checkbox" id="prefer-sfu-tgl" class="tgl tgl-flat">
								<div class="tgl-slider"></div>
							</label>
						</div>
						<div id="useMic" class="setting">
							<div class="settings-text">Use microphone</div>
							<label class="tgl-switch">
								<input type="checkbox" id="use-mic-tgl" class="tgl tgl-flat">
								<div class="tgl-slider"></div>
							</label>
						</div>
						<div id="forceMonoAudio" class="setting">
							<div class="settings-text">Force mono audio</div>
							<label class="tgl-switch">
								<input type="checkbox" id="force-mono-tgl" class="tgl tgl-flat">
								<div class="tgl-slider"></div>
							</label>
						</div>
						<div id="forceTURN" class="setting">
							<div class="settings-text">Force TURN</div>
							<label class="tgl-switch">
								<input type="checkbox" id="force-turn-tgl" class="tgl tgl-flat">
								<div class="tgl-slider"></div>
							</label>
						</div>
						<div id="toggleControl" class="setting">
							<div class="settings-text" id="control-scheme-text">Control Scheme</div>
							<label class="btn-overlay">
								<label class="tgl-switch">
									<input type="checkbox" id="control-tgl" class="tgl tgl-flat">
									<div class="tgl-slider"></div>
								</label>
							</label>
						</div>

						<div id="toggleCursor" class="setting">
							<div class="settings-text" id="cursor-text">Hide Browser Cursor</div>
							<label class="btn-overlay">
								<label class="tgl-switch">
									<input type="checkbox" id="cursor-tgl" class="tgl tgl-flat">
									<div class="tgl-slider"></div>
								</label>
							</label>
						</div>	
						<div id="showFPS" class="setting">
							<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="keyframeRequest" class="setting">
							<div class="settings-text">Request KeyFrame</div>
							<label class="btn-overlay">
								<input type="button" id="request-keyframe-button" class="overlay-button btn-flat" value="Request">
							</label>
						</div>	
						<section id="encoderSettings">
							<div id="encoderSettingsHeader" class="settings-text">
								<div>Encoder Settings</div>
							</div>
							<div id="encoderParamsContainer" class="collapse">
								<div class="form-group">
									<label for="encoder-min-qp-text">Min QP</label>
									<input type="number" class="form-control" id="encoder-min-qp-text" value="0" min="0"
										max="51" />
									<label for="encoder-max-qp-text">Max QP</label>
									<input type="number" class="form-control" id="encoder-max-qp-text" value="51" min="0"
										max="51" />
									<br>
									<input id="encoder-params-submit" class="overlay-button btn-flat" type="button"
										value="Apply">
								</div>
							</div>
						</section>
		
						<section id="webRTCSettings">
							<div id="webRTCSettingsHeader" class="settings-text">
								<div>WebRTC Settings</div>
							</div>
							<div id="webrtcParamsContainer" class="collapse">
								<div class="form-group">
									<label for="webrtc-fps-text">FPS</label>
									<input type="number" class="form-control" id="webrtc-fps-text" value="60" min="1"
										max="999" />
									<label for="webrtc-min-bitrate-text">Min bitrate (kbps)</label>
									<input type="number" class="form-control" id="webrtc-min-bitrate-text" value="0" min="0"
										max="100000" />
									<label for="webrtc-max-bitrate-text">Max bitrate (kbps)</label>
									<input type="number" class="form-control" id="webrtc-max-bitrate-text" value="0" min="0"
										max="100000" />
									<br>
									<input id="webrtc-params-submit" class="overlay-button btn-flat" type="button"
										value="Apply">
								</div>
							</div>
						</section>
		
						<section id="streamSettings">
							<div id="streamSettingsHeader" class="settings-text">
								<div>Stream Settings</div>
							</div>
							<div id="streamSettingsContainer" class="collapse">
								<div class="form-group">
									<div class="settings-text">Player stream</div>
									<select class="form-control" id="stream-select"></select>
									<div class="settings-text">Player track</div>
									<select class="form-control" id="track-select"></select>
								</div>
							</div>
						</section>
						<br>
						<section id="connectionSettings">
							<div id="connectionHeader" class="settings-text">
								<div>Stream Settings</div>
							</div>
							<div id="connectionContainer" class="collapse">
								<div class="setting">
									<div class="settings-text"></div>
									<label class="btn-overlay">
										<input type="button" id="restart-stream-button" class="overlay-button btn-flat" value="Restart stream">
									</label>
								</div>
							</div>
						</section>		
					</div>
				</div>
			</div>
			<div class="panel-wrap" id="stats-panel">
				<div class="panel">
					<div id="heading">Information</div>
					<div id="close" onclick="statsClicked()"></div>
					<div id="content">		
						<section id="statsPanel">
							<div class="setting settings-text">
								<div>Session Stats</div>
							</div>
							<div id="statsContainer" class="statsContainer">
								<div id="stats" class="stats"></div>
							</div>
						</section>
						<br>
						<section id="latencyTest">
							<div class="setting">
								<div class="settings-text">
									<div>Latency Report</div>
								</div>
								<label class="btn-overlay">
									<input type="button" id="test-latency-button" class="overlay-button btn-flat"
										value="Get Report">
								</label>
							</div>
							<div id="latencyStatsContainer" class="statsContainer">
								<div id=LatencyStats class="stats">No report yet</div>
							</div>
						</section>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>