68 lines
2.0 KiB
HTML
68 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>CrossDesk Web Client</title>
|
||
<link rel="stylesheet" href="styles.css" />
|
||
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>CrossDesk Web Client</h1>
|
||
|
||
<!-- Connection settings + status -->
|
||
<div class="top-card">
|
||
<div class="connection-card">
|
||
<h2>连接设置</h2>
|
||
<div class="option">
|
||
<label for="transmission-id">传输ID：</label>
|
||
<input id="transmission-id" type="text" value="475319798" />
|
||
</div>
|
||
<div class="option">
|
||
<label for="transmission-pwd">密码：</label>
|
||
<input id="transmission-pwd" type="password" value="111111" />
|
||
</div>
|
||
<div class="actions">
|
||
<button id="connect" onclick="connect()" disabled>连接</button>
|
||
<button
|
||
id="disconnect"
|
||
style="display: none"
|
||
onclick="disconnect()"
|
||
>
|
||
断开连接
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status-card">
|
||
<h2>状态</h2>
|
||
<div class="status-item">
|
||
ICE 连接状态: <span id="ice-connection-state"></span>
|
||
</div>
|
||
<div class="status-item">
|
||
信令状态: <span id="signaling-state"></span>
|
||
</div>
|
||
<div class="status-item">
|
||
数据通道: <span id="datachannel-state"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Video display -->
|
||
<div id="media" style="display: none">
|
||
<h2>远程画面 <span id="track-id" class="track-id"></span></h2>
|
||
<video
|
||
id="video"
|
||
playsinline
|
||
webkit-playsinline
|
||
x5-video-player-type="h5"
|
||
x5-video-player-fullscreen="true"
|
||
muted
|
||
></video>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="web_client.js"></script>
|
||
</body>
|
||
</html>
|