overlord/Overlord-Server/public/remotedesktop.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="/assets/nav-prelude.js"></script>
    <link rel="modulepreload" href="/assets/nav.js" />
    <title>Overlord Remote Desktop</title>
    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
    <link rel="stylesheet" href="/vendor/inter/400.css" />
    <link rel="stylesheet" href="/vendor/inter/600.css" />
    <link rel="stylesheet" href="/vendor/inter/700.css" />
<link rel="stylesheet" href="/assets/tailwind.css" />
    <link rel="stylesheet" href="/vendor/fontawesome/css/all.min.css" />
    <link rel="stylesheet" href="/assets/main.css" />
    <link rel="stylesheet" href="/assets/custom.css" />
    <link rel="stylesheet" href="/assets/console.css" />
    <script defer src="/assets/logout.js"></script>
  </head>
  <body class="min-h-screen bg-slate-950 text-slate-100">
    <header id="top-nav"></header>

    <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-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>
            </button>
            <button id="stopBtn" class="button ghost">
              <i class="fa-solid fa-stop"></i><span>Stop</span>
            </button>
            <button id="fullscreenBtn" class="button ghost">
              <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"
          >
            <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="text-slate-600">→</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"
          >
            <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="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="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 &amp; 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>

        <div
          id="canvasContainer"
          class="flex-1 rounded-xl border border-slate-800 bg-slate-900/70 shadow-lg overflow-hidden flex flex-col"
          style="min-height: 500px"
        >
          <div class="p-3 text-sm text-slate-400 flex-shrink-0">
            Client: <span id="clientLabel" class="text-slate-100">-</span>
          </div>
          <div
            class="flex-1 flex items-center justify-center p-4"
            style="min-height: 0; overflow: hidden"
          >
            <canvas
              id="frameCanvas"
              class="bg-slate-950"
              width="1280"
              height="720"
              style="
                display: block;
                max-width: 100%;
                max-height: 100%;
                width: auto;
                height: auto;
              "
            ></canvas>
            <video
              id="webrtcVideo"
              class="bg-slate-950"
              autoplay
              playsinline
              muted
              style="
                display: none;
                max-width: 100%;
                max-height: 100%;
                width: auto;
                height: auto;
              "
            ></video>
          </div>
        </div>
        <style>
          body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
          }
          #canvasContainer[data-stream-state="streaming"] {
            border-color: rgba(16, 185, 129, 0.7);
            box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.45);
          }
          #canvasContainer[data-stream-state="stalled"] {
            border-color: rgba(251, 146, 60, 0.7);
            box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.45);
          }
          #canvasContainer:fullscreen {
            display: flex;
            flex-direction: column;
            background: #000;
          }
          #canvasContainer:fullscreen #frameCanvas {
            width: 100%;
            height: 100%;
            object-fit: contain;
            margin: auto;
          }
        </style>
      </div>
    </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>
</html>