143 lines
4.4 KiB
HTML
143 lines
4.4 KiB
HTML
<!-- index.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" disabled>连接</button>
|
|
<button
|
|
id="disconnect"
|
|
style="display: none"
|
|
>
|
|
断开连接
|
|
</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>
|
|
设置
|
|
</button>
|
|
<!-- Add fullscreen control buttons -->
|
|
<button id="fullscreen-btn" class="control-btn">
|
|
最大化
|
|
</button>
|
|
<button id="real-fullscreen-btn" class="control-btn">
|
|
全屏
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Video container, including draggable virtual mouse -->
|
|
<div id="video-container" style="position: relative">
|
|
<video
|
|
id="video"
|
|
playsinline
|
|
webkit-playsinline
|
|
x5-video-player-type="h5"
|
|
x5-video-player-fullscreen="true"
|
|
muted
|
|
style="width: 100%"
|
|
></video>
|
|
|
|
<!-- Draggable virtual mouse -->
|
|
<div id="virtual-mouse">
|
|
<div class="virtual-mouse-top">
|
|
<button id="virtual-left-btn" class="virtual-mouse-btn">
|
|
左键
|
|
</button>
|
|
<div id="virtual-wheel" class="virtual-mouse-wheel">滚轮</div>
|
|
<button id="virtual-right-btn" class="virtual-mouse-btn">
|
|
右键
|
|
</button>
|
|
</div>
|
|
<div
|
|
id="virtual-touchpad"
|
|
class="virtual-mouse-touchpad"
|
|
style="touch-action: none"
|
|
>
|
|
触摸板区域 (请在此区域滑动控制鼠标)
|
|
</div>
|
|
<div id="virtual-mouse-drag-handle" class="drag-handle"></div>
|
|
</div>
|
|
</div>
|
|
</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" disabled>
|
|
发送
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="control.js"></script>
|
|
<script src="web_client.js"></script>
|
|
</body>
|
|
</html>
|