beautiful
This commit is contained in:
KingKDot
@@ -0,0 +1,19 @@
|
||||
(function () {
|
||||
const btn = document.getElementById("rdSettingsBtn");
|
||||
const menu = document.getElementById("rdSettingsMenu");
|
||||
const wrap = document.getElementById("rdSettingsWrap");
|
||||
if (!btn || !menu || !wrap) return;
|
||||
function setOpen(open) {
|
||||
menu.classList.toggle("hidden", !open);
|
||||
btn.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
}
|
||||
btn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
setOpen(menu.classList.contains("hidden"));
|
||||
});
|
||||
menu.addEventListener("click", (e) => e.stopPropagation());
|
||||
document.addEventListener("click", () => setOpen(false));
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") setOpen(false);
|
||||
});
|
||||
})();
|
||||
@@ -22,46 +22,7 @@
|
||||
|
||||
<main class="px-5 py-6 flex-1 flex flex-col">
|
||||
<div class="flex-1 flex flex-col gap-4" style="max-width: 100%">
|
||||
<div class="flex flex-wrap gap-3 items-center">
|
||||
<div
|
||||
class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 flex items-center gap-3"
|
||||
>
|
||||
<label class="text-sm text-slate-300" for="displaySelect"
|
||||
>Display</label
|
||||
>
|
||||
<select
|
||||
id="displaySelect"
|
||||
class="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-slate-100"
|
||||
></select>
|
||||
<button id="refreshDisplays" class="button ghost">
|
||||
<i class="fa-solid fa-rotate"></i><span>Refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 flex items-center gap-3 text-sm text-slate-300"
|
||||
>
|
||||
<label for="qualitySlider" class="text-slate-200">Quality</label>
|
||||
<input
|
||||
id="qualitySlider"
|
||||
type="range"
|
||||
min="10"
|
||||
max="100"
|
||||
step="5"
|
||||
value="90"
|
||||
class="accent-violet-400"
|
||||
/>
|
||||
<span id="qualityValue" class="pill pill-ghost text-slate-100"
|
||||
>95%</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 flex items-center gap-3 text-sm text-slate-300"
|
||||
>
|
||||
<label class="flex items-center gap-2 text-slate-200" title="Prefer H.264 when available; disable to force JPEG">
|
||||
<input type="checkbox" id="codecH264" checked /> H.264
|
||||
</label>
|
||||
<span id="codecMode" class="pill pill-ghost text-slate-100">Codec: auto</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="startBtn" class="button primary">
|
||||
<i class="fa-solid fa-play"></i><span>Start</span>
|
||||
@@ -79,6 +40,7 @@
|
||||
<i class="fa-solid fa-expand"></i><span>Fullscreen</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="streamStatus"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-slate-800 text-slate-300 border border-slate-700 text-sm"
|
||||
@@ -86,6 +48,7 @@
|
||||
<i class="fa-solid fa-circle-notch fa-spin"></i>
|
||||
<span>Connecting</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="cloneProgress"
|
||||
class="hidden items-center gap-2 bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 text-sm text-slate-300"
|
||||
@@ -111,55 +74,109 @@
|
||||
<i id="launchStatusIcon" class="fa-solid fa-rocket text-sky-400"></i>
|
||||
<span id="launchStatusLabel" class="text-slate-300">Launching...</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center gap-2 bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 text-sm text-slate-300"
|
||||
>
|
||||
<span class="uppercase tracking-wide text-xs text-slate-500"
|
||||
>fps</span
|
||||
>
|
||||
<span
|
||||
id="agentFps"
|
||||
class="pill pill-ghost font-mono text-violet-200"
|
||||
>--</span
|
||||
>
|
||||
<span class="uppercase tracking-wide text-xs text-slate-500">fps</span>
|
||||
<span id="agentFps" class="pill pill-ghost font-mono text-violet-200">--</span>
|
||||
<span class="text-slate-600">→</span>
|
||||
<span id="viewerFps" class="pill pill-ghost font-mono text-sky-200"
|
||||
>--</span
|
||||
>
|
||||
<span id="viewerFps" class="pill pill-ghost font-mono text-sky-200">--</span>
|
||||
<span class="text-slate-600">|</span>
|
||||
<span class="uppercase tracking-wide text-xs text-slate-500">lat</span>
|
||||
<span id="latencyDisplay" class="pill pill-ghost font-mono text-amber-200">--</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-4 bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2"
|
||||
>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200"
|
||||
><input type="checkbox" id="mouseCtrl" /> Mouse</label
|
||||
>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200"
|
||||
><input type="checkbox" id="kbdCtrl" /> Keyboard</label
|
||||
>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200" title="Sync clipboard between your browser and the remote machine"
|
||||
><input type="checkbox" id="clipboardSyncCtrl" /> Clipboard Sync</label
|
||||
>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200" title="Use DXGI Present hook for faster capture (requires injected process). WARNING: If Chrome or HVNC is running slowly, DXGI capture may be the cause — uncheck this and restart Chrome inside HVNC to fix it."
|
||||
><input type="checkbox" id="dxgiCtrl" /> DXGI Capture
|
||||
<i class="fa-solid fa-triangle-exclamation text-amber-400 text-xs" title="If Chrome or HVNC is running slowly, DXGI capture may be the cause — uncheck this and restart Chrome inside HVNC to fix it."></i></label
|
||||
>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200" title="Use UI Automation for WinUI3 app input (modern Windows apps). Disable if input is unreliable in non-WinUI3 apps."
|
||||
><input type="checkbox" id="uiaCtrl" checked /> UIA Support</label
|
||||
>
|
||||
<label for="hvncResolutionSelect" class="text-sm text-slate-200">Resolution</label>
|
||||
<select
|
||||
id="hvncResolutionSelect"
|
||||
class="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-slate-100 text-sm"
|
||||
>
|
||||
<option value="720">720p</option>
|
||||
<option value="1080" selected>1080p</option>
|
||||
<option value="1440">1440p</option>
|
||||
<option value="-1">Native</option>
|
||||
</select>
|
||||
|
||||
<div class="relative ml-auto" id="rdSettingsWrap">
|
||||
<button
|
||||
id="rdSettingsBtn"
|
||||
type="button"
|
||||
class="button ghost"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i class="fa-solid fa-sliders"></i><span>Settings</span>
|
||||
<i class="fa-solid fa-chevron-down text-[10px] text-slate-400 ml-1"></i>
|
||||
</button>
|
||||
|
||||
<div
|
||||
id="rdSettingsMenu"
|
||||
class="hidden absolute right-0 top-full mt-2 w-[360px] max-h-[75vh] overflow-y-auto rounded-xl border border-slate-700 bg-slate-900/95 backdrop-blur-md shadow-2xl shadow-black/50 z-50"
|
||||
role="menu"
|
||||
>
|
||||
<div class="px-4 py-3 border-b border-slate-800">
|
||||
<div class="text-xs uppercase tracking-wide text-slate-500 mb-2">Display</div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<label class="text-sm text-slate-300 w-20" for="displaySelect">Monitor</label>
|
||||
<select
|
||||
id="displaySelect"
|
||||
class="flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100"
|
||||
></select>
|
||||
<button id="refreshDisplays" class="button ghost" title="Refresh display list">
|
||||
<i class="fa-solid fa-rotate"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-sm text-slate-300 w-20" for="hvncResolutionSelect">Resolution</label>
|
||||
<select
|
||||
id="hvncResolutionSelect"
|
||||
class="flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100"
|
||||
>
|
||||
<option value="720">720p</option>
|
||||
<option value="1080" selected>1080p</option>
|
||||
<option value="1440">1440p</option>
|
||||
<option value="-1">Native</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-3 border-b border-slate-800">
|
||||
<div class="text-xs uppercase tracking-wide text-slate-500 mb-2">Video</div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<label class="text-sm text-slate-300 w-20" for="qualitySlider">Quality</label>
|
||||
<input
|
||||
id="qualitySlider"
|
||||
type="range"
|
||||
min="10"
|
||||
max="100"
|
||||
step="5"
|
||||
value="90"
|
||||
class="flex-1 accent-violet-400"
|
||||
/>
|
||||
<span id="qualityValue" class="pill pill-ghost text-slate-100 text-xs min-w-[44px] text-center">95%</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200" title="Prefer H.264 when available; disable to force JPEG">
|
||||
<input type="checkbox" id="codecH264" checked /> H.264
|
||||
</label>
|
||||
<span id="codecMode" class="pill pill-ghost text-slate-100 text-xs">Codec: auto</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-3 border-b border-slate-800">
|
||||
<div class="text-xs uppercase tracking-wide text-slate-500 mb-2">Input & Capture</div>
|
||||
<div class="grid grid-cols-2 gap-x-3 gap-y-2">
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200">
|
||||
<input type="checkbox" id="mouseCtrl" /> Mouse
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200">
|
||||
<input type="checkbox" id="kbdCtrl" /> Keyboard
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200 col-span-2" title="Sync clipboard between your browser and the remote machine">
|
||||
<input type="checkbox" id="clipboardSyncCtrl" /> Clipboard Sync
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200 col-span-2" title="Use DXGI Present hook for faster capture (requires injected process). WARNING: If Chrome or HVNC is running slowly, DXGI capture may be the cause — uncheck this and restart Chrome inside HVNC to fix it.">
|
||||
<input type="checkbox" id="dxgiCtrl" />
|
||||
<span>DXGI Capture</span>
|
||||
<i class="fa-solid fa-triangle-exclamation text-amber-400 text-xs" title="If Chrome or HVNC is running slowly, DXGI capture may be the cause — uncheck this and restart Chrome inside HVNC to fix it."></i>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200 col-span-2" title="Use UI Automation for WinUI3 app input (modern Windows apps). Disable if input is unreliable in non-WinUI3 apps.">
|
||||
<input type="checkbox" id="uiaCtrl" checked /> UIA Support
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -375,6 +392,7 @@
|
||||
</main>
|
||||
|
||||
<script defer src="/vendor/msgpackr/msgpackr.js"></script>
|
||||
<script defer src="/assets/remotedesktop-settings-menu.js"></script>
|
||||
<script type="module" src="/assets/nav.js"></script>
|
||||
<script type="module" src="/assets/hvnc.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -22,68 +22,7 @@
|
||||
|
||||
<main class="px-5 py-6 flex-1 flex flex-col">
|
||||
<div class="flex-1 flex flex-col gap-4" style="max-width: 100%">
|
||||
<div class="flex flex-wrap gap-3 items-center">
|
||||
<div
|
||||
class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 flex items-center gap-3"
|
||||
>
|
||||
<label class="text-sm text-slate-300" for="displaySelect"
|
||||
>Display</label
|
||||
>
|
||||
<select
|
||||
id="displaySelect"
|
||||
class="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-slate-100"
|
||||
></select>
|
||||
<button id="refreshDisplays" class="button ghost">
|
||||
<i class="fa-solid fa-rotate"></i><span>Refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 flex items-center gap-3 text-sm text-slate-300"
|
||||
>
|
||||
<label for="qualitySlider" class="text-slate-200">Quality</label>
|
||||
<input
|
||||
id="qualitySlider"
|
||||
type="range"
|
||||
min="10"
|
||||
max="100"
|
||||
step="5"
|
||||
value="90"
|
||||
class="accent-emerald-400"
|
||||
/>
|
||||
<span id="qualityValue" class="pill pill-ghost text-slate-100"
|
||||
>95%</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 flex items-center gap-3 text-sm text-slate-300"
|
||||
>
|
||||
<label for="resolutionSelect" class="text-slate-200">Resolution</label>
|
||||
<select
|
||||
id="resolutionSelect"
|
||||
class="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-slate-100"
|
||||
>
|
||||
<option value="720">720p</option>
|
||||
<option value="1080" selected>1080p</option>
|
||||
<option value="1440">1440p</option>
|
||||
<option value="-1">Native</option>
|
||||
</select>
|
||||
</div>
|
||||
<div
|
||||
class="bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 flex items-center gap-3 text-sm text-slate-300"
|
||||
>
|
||||
<label class="flex items-center gap-2 text-slate-200" title="Prefer H.264 when available; disable to force JPEG">
|
||||
<input type="checkbox" id="codecH264" checked /> H.264
|
||||
</label>
|
||||
<span id="codecMode" class="pill pill-ghost text-slate-100">Codec: auto</span>
|
||||
<label class="flex items-center gap-2 text-slate-200" title="Streaming transport. P2P: browser ↔ agent direct, server only relays signaling. Relayed: through MediaMTX (works behind tougher NATs).">
|
||||
<span class="text-slate-200">Transport</span>
|
||||
<select id="webrtcMode" class="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-slate-100">
|
||||
<option value="off" selected>Canvas</option>
|
||||
<option value="p2p">WebRTC P2P</option>
|
||||
<option value="relayed">WebRTC Relayed</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="startBtn" class="button primary">
|
||||
<i class="fa-solid fa-play"></i><span>Start</span>
|
||||
@@ -95,6 +34,7 @@
|
||||
<i class="fa-solid fa-expand"></i><span>Fullscreen</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="streamStatus"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-slate-800 text-slate-300 border border-slate-700 text-sm"
|
||||
@@ -102,21 +42,14 @@
|
||||
<i class="fa-solid fa-circle-notch fa-spin"></i>
|
||||
<span>Connecting</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center gap-2 bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 text-sm text-slate-300"
|
||||
>
|
||||
<span class="uppercase tracking-wide text-xs text-slate-500"
|
||||
>fps</span
|
||||
>
|
||||
<span
|
||||
id="agentFps"
|
||||
class="pill pill-ghost font-mono text-emerald-200"
|
||||
>--</span
|
||||
>
|
||||
<span class="uppercase tracking-wide text-xs text-slate-500">fps</span>
|
||||
<span id="agentFps" class="pill pill-ghost font-mono text-emerald-200">--</span>
|
||||
<span class="text-slate-600">→</span>
|
||||
<span id="viewerFps" class="pill pill-ghost font-mono text-sky-200"
|
||||
>--</span
|
||||
>
|
||||
<span id="viewerFps" class="pill pill-ghost font-mono text-sky-200">--</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2 text-sm text-slate-300"
|
||||
@@ -124,41 +57,126 @@
|
||||
<span class="uppercase tracking-wide text-xs text-slate-500">input</span>
|
||||
<span id="inputLatency" class="pill pill-ghost font-mono text-amber-200">-- ms</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-4 bg-slate-900/70 border border-slate-800 rounded-lg px-3 py-2"
|
||||
>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200"
|
||||
><input type="checkbox" id="mouseCtrl" /> Mouse</label
|
||||
|
||||
<div class="relative ml-auto" id="rdSettingsWrap">
|
||||
<button
|
||||
id="rdSettingsBtn"
|
||||
type="button"
|
||||
class="button ghost"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200"
|
||||
><input type="checkbox" id="kbdCtrl" /> Keyboard</label
|
||||
<i class="fa-solid fa-sliders"></i><span>Settings</span>
|
||||
<i class="fa-solid fa-chevron-down text-[10px] text-slate-400 ml-1"></i>
|
||||
</button>
|
||||
|
||||
<div
|
||||
id="rdSettingsMenu"
|
||||
class="hidden absolute right-0 top-full mt-2 w-[360px] max-h-[75vh] overflow-y-auto rounded-xl border border-slate-700 bg-slate-900/95 backdrop-blur-md shadow-2xl shadow-black/50 z-50"
|
||||
role="menu"
|
||||
>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200" title="Show mouse cursor in captured frames"
|
||||
><input type="checkbox" id="cursorCtrl" /> Cursor</label
|
||||
>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200" title="Use GPU desktop duplication (Windows only)"
|
||||
><input type="checkbox" id="duplicationCtrl" /> GPU Capture</label
|
||||
>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200" title="Sync clipboard between your browser and the remote machine"
|
||||
><input type="checkbox" id="clipboardSyncCtrl" /> Clipboard Sync</label
|
||||
>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200" title="Stream system audio from the remote machine"
|
||||
><input type="checkbox" id="audioCtrl" /> <i class="fa-solid fa-volume-high text-slate-400"></i> Audio</label
|
||||
>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200" title="Audio transport. WS: raw PCM over the existing WebSocket (current default). WebRTC modes use G.711 over the WebRTC track instead.">
|
||||
<span class="text-slate-400">Audio via</span>
|
||||
<select id="audioTransport" class="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-slate-100">
|
||||
<option value="off" selected>WS</option>
|
||||
<option value="p2p">WebRTC P2P</option>
|
||||
<option value="relayed">WebRTC Relayed</option>
|
||||
</select>
|
||||
</label>
|
||||
<audio id="webrtcAudio" autoplay style="display: none"></audio>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200" title="Smooths mouse input for steadier movement">
|
||||
<span class="text-slate-400">Smoothing</span>
|
||||
<input id="smoothingSlider" type="range" min="0" max="80" step="5" value="20" class="accent-emerald-400" />
|
||||
<span id="smoothingValue" class="pill pill-ghost text-slate-100">20%</span>
|
||||
</label>
|
||||
<div class="px-4 py-3 border-b border-slate-800">
|
||||
<div class="text-xs uppercase tracking-wide text-slate-500 mb-2">Display</div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<label class="text-sm text-slate-300 w-20" for="displaySelect">Monitor</label>
|
||||
<select
|
||||
id="displaySelect"
|
||||
class="flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100"
|
||||
></select>
|
||||
<button id="refreshDisplays" class="button ghost" title="Refresh display list">
|
||||
<i class="fa-solid fa-rotate"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-sm text-slate-300 w-20" for="resolutionSelect">Resolution</label>
|
||||
<select
|
||||
id="resolutionSelect"
|
||||
class="flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100"
|
||||
>
|
||||
<option value="720">720p</option>
|
||||
<option value="1080" selected>1080p</option>
|
||||
<option value="1440">1440p</option>
|
||||
<option value="-1">Native</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-3 border-b border-slate-800">
|
||||
<div class="text-xs uppercase tracking-wide text-slate-500 mb-2">Video</div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<label class="text-sm text-slate-300 w-20" for="qualitySlider">Quality</label>
|
||||
<input
|
||||
id="qualitySlider"
|
||||
type="range"
|
||||
min="10"
|
||||
max="100"
|
||||
step="5"
|
||||
value="90"
|
||||
class="flex-1 accent-emerald-400"
|
||||
/>
|
||||
<span id="qualityValue" class="pill pill-ghost text-slate-100 text-xs min-w-[44px] text-center">95%</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<label class="text-sm text-slate-300 w-20" for="webrtcMode">Transport</label>
|
||||
<select id="webrtcMode" class="flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100" title="Streaming transport. P2P: browser ↔ agent direct, server only relays signaling. Relayed: through MediaMTX (works behind tougher NATs).">
|
||||
<option value="off" selected>Canvas</option>
|
||||
<option value="p2p">WebRTC P2P</option>
|
||||
<option value="relayed">WebRTC Relayed</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200" title="Prefer H.264 when available; disable to force JPEG">
|
||||
<input type="checkbox" id="codecH264" checked /> H.264
|
||||
</label>
|
||||
<span id="codecMode" class="pill pill-ghost text-slate-100 text-xs">Codec: auto</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-3 border-b border-slate-800">
|
||||
<div class="text-xs uppercase tracking-wide text-slate-500 mb-2">Audio</div>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200 mb-2" title="Stream system audio from the remote machine">
|
||||
<input type="checkbox" id="audioCtrl" />
|
||||
<i class="fa-solid fa-volume-high text-slate-400"></i>
|
||||
<span>Enable audio</span>
|
||||
</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-sm text-slate-300 w-20" for="audioTransport">Via</label>
|
||||
<select id="audioTransport" class="flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100" title="Audio transport. WS: raw PCM over the existing WebSocket (current default). WebRTC modes use G.711 over the WebRTC track instead.">
|
||||
<option value="off" selected>WS</option>
|
||||
<option value="p2p">WebRTC P2P</option>
|
||||
<option value="relayed">WebRTC Relayed</option>
|
||||
</select>
|
||||
</div>
|
||||
<audio id="webrtcAudio" autoplay style="display: none"></audio>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-3 border-b border-slate-800">
|
||||
<div class="text-xs uppercase tracking-wide text-slate-500 mb-2">Input & Capture</div>
|
||||
<div class="grid grid-cols-2 gap-x-3 gap-y-2 mb-3">
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200">
|
||||
<input type="checkbox" id="mouseCtrl" /> Mouse
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200">
|
||||
<input type="checkbox" id="kbdCtrl" /> Keyboard
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200" title="Show mouse cursor in captured frames">
|
||||
<input type="checkbox" id="cursorCtrl" /> Cursor
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200" title="Use GPU desktop duplication (Windows only)">
|
||||
<input type="checkbox" id="duplicationCtrl" /> GPU Capture
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-200 col-span-2" title="Sync clipboard between your browser and the remote machine">
|
||||
<input type="checkbox" id="clipboardSyncCtrl" /> Clipboard Sync
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2" title="Smooths mouse input for steadier movement">
|
||||
<label class="text-sm text-slate-300 w-20" for="smoothingSlider">Smoothing</label>
|
||||
<input id="smoothingSlider" type="range" min="0" max="80" step="5" value="20" class="flex-1 accent-emerald-400" />
|
||||
<span id="smoothingValue" class="pill pill-ghost text-slate-100 text-xs min-w-[44px] text-center">20%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -233,6 +251,7 @@
|
||||
</main>
|
||||
|
||||
<script defer src="/vendor/msgpackr/msgpackr.js"></script>
|
||||
<script defer src="/assets/remotedesktop-settings-menu.js"></script>
|
||||
<script type="module" src="/assets/nav.js"></script>
|
||||
<script type="module" src="/assets/remotedesktop.js"></script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user