119 lines
3.4 KiB
HTML
119 lines
3.4 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="931631602" />
|
||
</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">
|
||
<div class="option" style="margin-bottom: 12px">
|
||
<label for="display-id">显示器 ID: </label>
|
||
<select id="display-id" style="width: 160px" disabled>
|
||
<option value="" selected>等待轨道ID...</option>
|
||
</select>
|
||
<button
|
||
id="set-display"
|
||
disabled
|
||
onclick="CrossDeskControl.setDisplayId()"
|
||
>
|
||
设置
|
||
</button>
|
||
</div>
|
||
<video
|
||
id="video"
|
||
playsinline
|
||
webkit-playsinline
|
||
x5-video-player-type="h5"
|
||
x5-video-player-fullscreen="true"
|
||
muted
|
||
></video>
|
||
</div>
|
||
|
||
<!-- Data Channel UI -->
|
||
<div class="top-card">
|
||
<div class="connection-card">
|
||
<h2>数据通道</h2>
|
||
<div class="option">
|
||
<label for="audio-capture">采集音频：</label>
|
||
<input id="audio-capture" type="checkbox" disabled />
|
||
</div>
|
||
|
||
<div
|
||
id="data-channel"
|
||
class="status-item"
|
||
style="
|
||
height: 200px;
|
||
overflow: auto;
|
||
white-space: pre-wrap;
|
||
font-family: monospace;
|
||
"
|
||
></div>
|
||
<div style="display: flex; gap: 8px; margin-top: 10px">
|
||
<input
|
||
id="dc-input"
|
||
type="text"
|
||
placeholder="输入要发送的消息"
|
||
style="flex: 1; padding: 8px"
|
||
/>
|
||
<button
|
||
id="dc-send"
|
||
onclick="CrossDeskControl.sendDataChannelMessage()"
|
||
disabled
|
||
>
|
||
发送
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="control.js"></script>
|
||
<script src="webrtc_client.js"></script>
|
||
</body>
|
||
</html>
|