diff --git a/index.html b/index.html
index fb525ef..f4995c2 100644
--- a/index.html
+++ b/index.html
@@ -53,6 +53,17 @@
@@ -175,8 +189,8 @@
-
-
+
+
@@ -259,7 +273,8 @@
-
+
+
diff --git a/styles.css b/styles.css
index f301216..b7bae99 100644
--- a/styles.css
+++ b/styles.css
@@ -113,7 +113,7 @@ body {
border-radius: 24px; /* Same radius as status bar panel */
padding: 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
- width: clamp(280px, 85%, 320px);
+ width: clamp(400px, 85%, 320px);
position: relative;
z-index: 2;
/* Disable text selection and copying */
@@ -348,6 +348,15 @@ body {
flex-wrap: wrap;
/* Re-enable interaction for buttons */
pointer-events: auto;
+ align-items: center;
+ width: 100%;
+ justify-content: space-between;
+}
+
+.actions-left {
+ display: flex;
+ gap: 10px;
+ align-items: center;
}
button {
@@ -1366,3 +1375,20 @@ select:focus {
flex: 1;
}
}
+
+/* Server configuration button */
+.server-config-btn {
+ background-color: rgba(0, 0, 0, 0.1);
+ color: #333;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ padding: 10px 16px;
+ min-width: auto;
+ margin-left: auto;
+ margin-right: 20px;
+}
+
+.server-config-btn:hover:not(:disabled) {
+ background-color: rgba(0, 0, 0, 0.15);
+ border-color: rgba(0, 0, 0, 0.3);
+}
+
diff --git a/web_client.js b/web_client.js
index ad333ba..3c0aa0d 100644
--- a/web_client.js
+++ b/web_client.js
@@ -18,14 +18,19 @@ const elements = {
connectionStatusIndicator: document.getElementById("connection-status-indicator"),
connectedStatusLed: document.getElementById("connected-status-led"),
disconnectConnected: document.getElementById("disconnect-connected"),
+ // Server configuration elements
+ serverConfigBtn: document.getElementById("server-config-btn"),
+ serverConfigContainer: document.getElementById("server-config-container"),
+ signalingServerInput: document.getElementById("signaling-server"),
+ stunTurnServerInput: document.getElementById("stun-turn-server"),
};
// Config section (can be overridden by setting window.CROSSDESK_CONFIG before this script runs)
const DEFAULT_CONFIG = {
- signalingUrl: "wss://api.crossdesk.cn:9099",
+ signalingUrl: "wss://192.168.0.107:33333",
iceServers: [
- { urls: ["stun:api.crossdesk.cn:3478"] },
- { urls: ["turn:api.crossdesk.cn:3478"], username: "crossdesk", credential: "crossdeskpw" },
+ { urls: ["stun:192.168.0.107:33334"] },
+ { urls: ["turn:192.168.0.107:33334"], username: "crossdesk", credential: "crossdeskpw" },
],
heartbeatIntervalMs: 3000,
heartbeatTimeoutMs: 10000,
@@ -34,6 +39,107 @@ const DEFAULT_CONFIG = {
};
const CONFIG = Object.assign({}, DEFAULT_CONFIG, window.CROSSDESK_CONFIG || {});
+// Function to extract host:port from signaling URL
+function extractSignalingHostPort() {
+ try {
+ const url = new URL(CONFIG.signalingUrl);
+ return url.host; // Returns "host:port"
+ } catch (e) {
+ return "192.168.0.107:33333"; // Default fallback
+ }
+}
+
+// Function to extract STUN/TURN server host:port
+function extractStunTurnHostPort() {
+ if (CONFIG.iceServers && CONFIG.iceServers.length > 0) {
+ const firstServer = CONFIG.iceServers[0];
+ if (firstServer.urls) {
+ const urls = Array.isArray(firstServer.urls) ? firstServer.urls : [firstServer.urls];
+ if (urls.length > 0) {
+ // Extract host:port from URL like "stun:192.168.0.107:33334"
+ const urlStr = urls[0];
+ const match = urlStr.match(/stun:(.+):([0-9]+)/) || urlStr.match(/turn:(.+):([0-9]+)/);
+ if (match) {
+ return `${match[1]}:${match[2]}`;
+ }
+ }
+ }
+ }
+ return "192.168.0.107:33334"; // Default fallback
+}
+
+// Initialize server config inputs with current values
+function initServerConfigInputs() {
+ if (elements.signalingServerInput) {
+ elements.signalingServerInput.value = extractSignalingHostPort();
+ }
+ if (elements.stunTurnServerInput) {
+ elements.stunTurnServerInput.value = extractStunTurnHostPort();
+ }
+}
+
+// Toggle server configuration visibility
+function toggleServerConfig() {
+ if (!elements.serverConfigContainer) return;
+
+ const isHidden = elements.serverConfigContainer.style.display === "none";
+
+ if (isHidden) {
+ // Show server config
+ initServerConfigInputs();
+ elements.serverConfigContainer.style.display = "block";
+ } else {
+ // Hide server config
+ elements.serverConfigContainer.style.display = "none";
+ }
+}
+
+// Function to update server configuration
+function updateServerConfig(signalingHostPort, stunTurnHostPort) {
+ if (!signalingHostPort || !stunTurnHostPort) {
+ return false;
+ }
+
+ // Update signaling URL
+ CONFIG.signalingUrl = `wss://${signalingHostPort}`;
+
+ // Update ICE servers
+ CONFIG.iceServers = [
+ { urls: [`stun:${stunTurnHostPort}`] },
+ { urls: [`turn:${stunTurnHostPort}`], username: "crossdesk", credential: "crossdeskpw" },
+ ];
+
+ // Update global config
+ window.CROSSDESK_CONFIG = CONFIG;
+
+ return true;
+}
+
+// Save server configuration
+function saveServerConfig() {
+ if (!elements.signalingServerInput || !elements.stunTurnServerInput) return;
+
+ const signalingHostPort = elements.signalingServerInput.value.trim();
+ const stunTurnHostPort = elements.stunTurnServerInput.value.trim();
+
+ if (!signalingHostPort || !stunTurnHostPort) {
+ alert("请填写完整的服务器地址");
+ return;
+ }
+
+ const success = updateServerConfig(signalingHostPort, stunTurnHostPort);
+ if (success) {
+ // Hide server config container
+ if (elements.serverConfigContainer) {
+ elements.serverConfigContainer.style.display = "none";
+ }
+ // Reload the page to apply new configuration
+ setTimeout(() => {
+ window.location.reload();
+ }, 500);
+ }
+}
+
const control = window.CrossDeskControl;
let pc = null;
let clientId = "000000";
@@ -377,6 +483,7 @@ function sendLeaveRequest() {
function connect() {
if (!elements.connectBtn || !elements.disconnectBtn || !elements.media) return;
+ saveServerConfig()
elements.connectBtn.style.display = "none";
elements.disconnectBtn.style.display = "inline-block";
elements.media.style.display = "flex";
@@ -599,6 +706,11 @@ if (elements.displaySelect) {
elements.displaySelect.addEventListener("change", setDisplayId);
}
+// Server configuration event listeners
+if (elements.serverConfigBtn) {
+ elements.serverConfigBtn.addEventListener("click", toggleServerConfig);
+}
+
// Panel minimize/maximize and drag functionality
let panelHideTimer = null;
const PANEL_HIDE_DELAY = 3000; // 3 seconds