137 lines
4.2 KiB
HTML
137 lines
4.2 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>Connection Settings</h2>
|
|
<div class="option">
|
|
<label for="transmission-id">Transmission ID:</label>
|
|
<input id="transmission-id" type="text" value="931631602" />
|
|
</div>
|
|
<div class="option">
|
|
<label for="transmission-pwd">Password:</label>
|
|
<input id="transmission-pwd" type="password" value="111111" />
|
|
</div>
|
|
<div class="actions">
|
|
<button id="connect" onclick="connect()" disabled>Connect</button>
|
|
<button
|
|
id="disconnect"
|
|
style="display: none"
|
|
onclick="disconnect()"
|
|
>
|
|
Disconnect
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-card">
|
|
<h2>Status</h2>
|
|
<div class="status-item">
|
|
ICE Connection State: <span id="ice-connection-state"></span>
|
|
</div>
|
|
<div class="status-item">
|
|
Signaling State: <span id="signaling-state"></span>
|
|
</div>
|
|
<div class="status-item">
|
|
Data Channel: <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>Waiting for track ID...</option>
|
|
</select>
|
|
<button
|
|
id="set-display"
|
|
disabled
|
|
onclick="CrossDeskControl.setDisplayId()"
|
|
>
|
|
Set
|
|
</button>
|
|
<!-- Add fullscreen control buttons -->
|
|
<button id="fullscreen-btn" class="control-btn">Maximize</button>
|
|
<button id="real-fullscreen-btn" class="control-btn">Fullscreen</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">
|
|
<button id="virtual-left-btn" class="virtual-mouse-btn">
|
|
Left
|
|
</button>
|
|
<button id="virtual-right-btn" class="virtual-mouse-btn">
|
|
Right
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Channel UI -->
|
|
<div class="top-card">
|
|
<div class="connection-card">
|
|
<h2>Data Channel</h2>
|
|
<div class="option">
|
|
<label for="audio-capture">Capture Audio:</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="Enter message to send"
|
|
style="flex: 1; padding: 8px"
|
|
/>
|
|
<button
|
|
id="dc-send"
|
|
onclick="CrossDeskControl.sendDataChannelMessage()"
|
|
disabled
|
|
>
|
|
Send
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="control.js"></script>
|
|
<script src="webrtc_client.js"></script>
|
|
</body>
|
|
</html>
|