2026-03-05 00:04:26 -06:00
<!doctype html>
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
2026-05-08 15:36:24 -05:00
< script src = "/assets/nav-prelude.js" ></ script >
< link rel = "modulepreload" href = "/assets/nav.js" />
2026-03-05 00:04:26 -06:00
< title > Overlord Remote Desktop</ title >
2026-03-05 15:25:52 -06:00
< link rel = "icon" type = "image/x-icon" href = "/assets/favicon.ico" />
2026-04-18 21:16:29 -05:00
< 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" />
2026-03-05 00:04:26 -06:00
< link rel = "stylesheet" href = "/assets/main.css" />
2026-04-01 13:49:41 -05:00
< link rel = "stylesheet" href = "/assets/custom.css" />
2026-03-05 00:04:26 -06:00
< link rel = "stylesheet" href = "/assets/console.css" />
2026-04-08 14:37:03 -05:00
< script defer src = "/assets/logout.js" ></ script >
2026-03-05 00:04:26 -06:00
</ 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%" >
2026-05-19 21:24:56 -05:00
< div class = "flex flex-wrap gap-2 items-center" >
2026-03-05 00:04:26 -06:00
< 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 >
2026-06-02 17:18:46 -05:00
< button id = "recordBtn" class = "button ghost" disabled title = "Record on the server using Canvas transport" >
< i class = "fa-solid fa-circle-dot" ></ i >< span > Record</ span >
</ button >
< div class = "relative" id = "rdRecordingSettingsWrap" >
< button
id = "rdRecordingSettingsBtn"
type = "button"
class = "button ghost"
aria-haspopup = "true"
aria-expanded = "false"
>
< i class = "fa-solid fa-sliders" ></ i >< span > Recording Settings</ span >
< i class = "fa-solid fa-chevron-down text-[10px] text-slate-400 ml-1" ></ i >
</ button >
< div
id = "rdRecordingSettingsMenu"
class = "hidden absolute left-0 top-full mt-2 w-[280px] 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" >
< div class = "text-xs uppercase tracking-wide text-slate-500 mb-2" > Recording</ div >
< div class = "flex items-center gap-2 mb-2" >
< label class = "text-sm text-slate-300 w-16" for = "recordMode" > Mode</ label >
< select
id = "recordMode"
class = "flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100"
title = "Recording size mode"
>
< option value = "normal" > Normal</ option >
< option value = "compact" > Compact</ option >
</ select >
</ div >
< div class = "flex items-center gap-2" >
< label class = "text-sm text-slate-300 w-16" for = "recordFps" > FPS</ label >
< select
id = "recordFps"
class = "flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100"
title = "Recording frame rate"
>
< option value = "" > Source FPS</ option >
< option value = "3" > 3 fps</ option >
< option value = "5" > 5 fps</ option >
< option value = "10" > 10 fps</ option >
< option value = "15" > 15 fps</ option >
< option value = "30" > 30 fps</ option >
< option value = "60" > 60 fps</ option >
</ select >
</ div >
</ div >
</ div >
</ div >
2026-03-05 00:04:26 -06:00
< button id = "fullscreenBtn" class = "button ghost" >
< i class = "fa-solid fa-expand" ></ i >< span > Fullscreen</ span >
</ button >
</ div >
2026-05-19 21:24:56 -05:00
2026-03-05 00:04:26 -06:00
< 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 >
2026-05-19 21:24:56 -05:00
2026-03-05 00:04:26 -06:00
< 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"
>
2026-05-19 21:24:56 -05:00
< 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 >
2026-03-05 00:04:26 -06:00
< span class = "text-slate-600" > →</ span >
2026-05-19 21:24:56 -05:00
< span id = "viewerFps" class = "pill pill-ghost font-mono text-sky-200" > --</ span >
2026-03-05 00:04:26 -06:00
</ 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 >
2026-07-17 04:28:23 -05:00
< 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"
title = "WebRTC receive bitrate, network RTT, packet loss, and selected route"
>
< span class = "uppercase tracking-wide text-xs text-slate-500" > net</ span >
< span id = "networkStats" class = "pill pill-ghost font-mono text-cyan-200" > --</ span >
</ div >
< button id = "diagnosticsBtn" type = "button" class = "button ghost" aria-pressed = "false" title = "Show streaming diagnostics HUD" >
< i class = "fa-solid fa-gauge-high" ></ i >< span > Stats HUD</ span >
</ button >
2026-05-19 21:24:56 -05:00
< div class = "relative ml-auto" id = "rdSettingsWrap" >
< button
id = "rdSettingsBtn"
type = "button"
class = "button ghost"
aria-haspopup = "true"
aria-expanded = "false"
2026-03-05 00:04:26 -06:00
>
2026-05-19 21:24:56 -05:00
< 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"
2026-03-05 00:04:26 -06:00
>
2026-05-19 21:24:56 -05:00
< 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 >
< 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 >
2026-06-06 16:08:28 -05:00
< div class = "flex items-center gap-2 mb-2" >
2026-07-13 09:34:16 -05:00
< label class = "text-sm text-slate-300 w-20" for = "streamProfileSelect" > Profile</ label >
2026-06-06 16:08:28 -05:00
< select
2026-07-13 09:34:16 -05:00
id = "streamProfileSelect"
2026-06-06 16:08:28 -05:00
class = "flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100"
2026-07-17 13:23:12 -05:00
title = "Auto starts with the best supported resolution and adapts to WebRTC network conditions"
2026-06-06 16:08:28 -05:00
>
2026-07-17 13:23:12 -05:00
< option value = "auto" selected > Auto (best)</ option >
2026-07-13 09:34:16 -05:00
< option value = "720:30" > 30 FPS - 720p</ option >
< option value = "720:60" > 60 FPS - 720p</ option >
< option value = "1080:30" > 30 FPS - 1080p</ option >
2026-07-17 13:23:12 -05:00
< option value = "1080:60" > 60 FPS - 1080p</ option >
2026-06-06 16:08:28 -05:00
</ select >
</ div >
2026-07-13 09:34:16 -05:00
< div id = "streamProfileDetail" class = "mb-2 text-xs text-slate-500" > Checking hardware encoder profiles…</ div >
2026-07-17 04:28:23 -05:00
< div class = "flex items-center gap-2 mb-2" >
< label class = "text-sm text-slate-300 w-20" for = "bitrateSelect" > Bitrate</ label >
2026-07-17 13:23:12 -05:00
< select id = "bitrateSelect" class = "flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100" title = "Auto adapts bitrate from receiver feedback when the stream profile is also Auto" >
2026-07-17 04:28:23 -05:00
< option value = "0" selected > Auto</ option >
< option value = "5" > 5 Mbps</ option >
< option value = "10" > 10 Mbps</ option >
< option value = "15" > 15 Mbps</ option >
< option value = "20" > 20 Mbps</ option >
< option value = "30" > 30 Mbps</ option >
< option value = "40" > 40 Mbps</ option >
< option value = "50" > 50 Mbps</ option >
</ select >
</ div >
2026-05-19 21:24:56 -05:00
< 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 >
2026-07-06 14:00:34 -05:00
< label class = "mt-2 flex items-center gap-2 text-sm text-slate-200" title = "Skip NVENC/direct GPU H.264 and use the software H.264 fallback path" >
< input type = "checkbox" id = "softwareH264Ctrl" /> Software H.264
</ label >
2026-05-29 22:51:25 -05:00
< label class = "mt-2 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 >
2026-05-19 21:24:56 -05:00
</ 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 >
2026-07-17 04:28:23 -05:00
< 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 uses raw PCM over the existing WebSocket. WebRTC modes use full-band Opus." >
2026-05-19 21:24:56 -05:00
< 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 col-span-2" title = "Sync clipboard between your browser and the remote machine" >
< input type = "checkbox" id = "clipboardSyncCtrl" /> Clipboard Sync
</ label >
2026-07-10 23:44:46 -05:00
< label class = "flex items-center gap-2 text-sm text-red-400 col-span-2" title = "Blacks out local screen and blocks physical input. Remote view remains unaffected. Local escape: Ctrl+P" >
< input type = "checkbox" id = "privacyCtrl" /> Privacy Mode
</ label >
2026-05-19 21:24:56 -05:00
</ 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 >
2026-03-05 00:04:26 -06:00
</ 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
2026-07-17 04:28:23 -05:00
class = "relative flex-1 flex items-center justify-center p-4"
2026-03-05 00:04:26 -06:00
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 >
2026-05-13 13:44:33 -05:00
< video
id = "webrtcVideo"
class = "bg-slate-950"
autoplay
playsinline
muted
style = "
display: none;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
"
></ video >
2026-07-17 04:28:23 -05:00
< section id = "diagnosticsHud" class = "rd-diagnostics-hud hidden" aria-label = "Streaming diagnostics" >
< div class = "rd-diagnostics-header" >
< div >
< div class = "rd-diagnostics-title" > Streaming diagnostics</ div >
< div id = "diagSummary" class = "rd-diagnostics-summary" > Waiting for frames</ div >
</ div >
< button id = "diagnosticsClose" type = "button" class = "rd-diagnostics-close" aria-label = "Close diagnostics" > × </ button >
</ div >
< div class = "rd-diagnostics-meta" >
< span id = "diagTransport" > Canvas</ span >
< span id = "diagCodec" > --</ span >
< span id = "diagResolution" > --</ span >
</ div >
< div class = "rd-diagnostics-section" >
< div class = "rd-diagnostics-section-title" > Agent pipeline</ div >
< div class = "rd-diagnostics-grid" >
< span > Capture</ span >< strong id = "diagCapture" > -- ms</ strong >
< span > Encode</ span >< strong id = "diagEncode" > -- ms</ strong >
< span > Packet/write</ span >< strong id = "diagSend" > -- ms</ strong >
< span > Agent total</ span >< strong id = "diagAgentTotal" > -- ms</ strong >
</ div >
</ div >
< div class = "rd-diagnostics-section" >
< div class = "rd-diagnostics-section-title" > Transport</ div >
< div class = "rd-diagnostics-grid" >
< span > Receive rate</ span >< strong id = "diagBitrate" > -- Mbps</ strong >
< span > Network RTT</ span >< strong id = "diagRtt" > -- ms</ strong >
< span > Loss / jitter</ span >< strong id = "diagLossJitter" > --</ strong >
< span > Jitter buffer</ span >< strong id = "diagJitterBuffer" > -- ms</ strong >
</ div >
</ div >
< div class = "rd-diagnostics-section" >
< div class = "rd-diagnostics-section-title" > Viewer pipeline</ div >
< div class = "rd-diagnostics-grid" >
< span > Decode latency</ span >< strong id = "diagDecode" > -- ms</ strong >
< span > Receive → render</ span >< strong id = "diagRender" > -- ms</ strong >
< span > Decode queue</ span >< strong id = "diagQueue" > 0</ strong >
< span > Dropped / coalesced</ span >< strong id = "diagDropped" > 0 / 0</ strong >
< span > FPS agent → viewer</ span >< strong id = "diagFps" > -- → --</ strong >
< span > Input RTT</ span >< strong id = "diagInput" > -- ms</ strong >
</ div >
</ div >
</ section >
2026-03-05 00:04:26 -06:00
</ div >
</ div >
< style >
body {
display : flex ;
flex-direction : column ;
min-height : 100 vh ;
}
# canvasContainer [ data-stream-state = "streaming" ] {
border-color : rgba ( 16 , 185 , 129 , 0.7 );
box-shadow : 0 0 0 1 px rgba ( 16 , 185 , 129 , 0.45 );
}
# canvasContainer [ data-stream-state = "stalled" ] {
border-color : rgba ( 251 , 146 , 60 , 0.7 );
box-shadow : 0 0 0 1 px rgba ( 251 , 146 , 60 , 0.45 );
}
2026-06-02 17:18:46 -05:00
# recordBtn . recording {
background : rgba ( 190 , 18 , 60 , 0.9 );
border-color : rgba ( 244 , 63 , 94 , 0.85 );
color : #fff ;
}
2026-03-05 00:04:26 -06:00
# canvasContainer : fullscreen {
display : flex ;
flex-direction : column ;
background : #000 ;
}
# canvasContainer : fullscreen # frameCanvas {
width : 100 % ;
height : 100 % ;
object-fit : contain ;
margin : auto ;
}
2026-07-17 04:28:23 -05:00
. rd-diagnostics-hud {
position : absolute ;
top : 1.25 rem ;
right : 1.25 rem ;
z-index : 30 ;
width : min ( 360 px , calc ( 100 % - 2.5 rem ));
max-height : calc ( 100 % - 2.5 rem );
overflow-y : auto ;
padding : 14 px ;
border : 1 px solid rgba ( 71 , 85 , 105 , 0.9 );
border-radius : 12 px ;
color : #e2e8f0 ;
background : rgba ( 2 , 6 , 23 , 0.9 );
box-shadow : 0 18 px 45 px rgba ( 0 , 0 , 0 , 0.5 );
backdrop-filter : blur ( 12 px );
font-size : 12 px ;
}
. rd-diagnostics-hud . hidden { display : none ; }
. rd-diagnostics-header , . rd-diagnostics-meta { display : flex ; align-items : center ; justify-content : space-between ; gap : 10 px ; }
. rd-diagnostics-title { color : #f8fafc ; font-size : 14 px ; font-weight : 700 ; }
. rd-diagnostics-summary { margin-top : 2 px ; color : #67e8f9 ; }
. rd-diagnostics-summary [ data-severity = "warn" ] { color : #fbbf24 ; }
. rd-diagnostics-summary [ data-severity = "bad" ] { color : #fb7185 ; }
. rd-diagnostics-close { border : 0 ; background : transparent ; color : #94a3b8 ; font-size : 22 px ; cursor : pointer ; }
. rd-diagnostics-meta { justify-content : flex-start ; flex-wrap : wrap ; margin : 10 px 0 ; color : #94a3b8 ; font-family : ui-monospace , monospace ; }
. rd-diagnostics-meta span { padding : 2 px 6 px ; border-radius : 999 px ; background : rgba ( 30 , 41 , 59 , 0.8 ); }
. rd-diagnostics-section { padding-top : 9 px ; margin-top : 9 px ; border-top : 1 px solid rgba ( 51 , 65 , 85 , 0.75 ); }
. rd-diagnostics-section-title { margin-bottom : 6 px ; color : #64748b ; font-size : 10 px ; font-weight : 700 ; letter-spacing : .08 em ; text-transform : uppercase ; }
. rd-diagnostics-grid { display : grid ; grid-template-columns : 1 fr auto ; gap : 5 px 14 px ; }
. rd-diagnostics-grid span { color : #94a3b8 ; }
. rd-diagnostics-grid strong { color : #e2e8f0 ; font-family : ui-monospace , monospace ; font-weight : 600 ; text-align : right ; }
2026-03-05 00:04:26 -06:00
</ style >
</ div >
</ main >
2026-04-18 21:16:29 -05:00
< script defer src = "/vendor/msgpackr/msgpackr.js" ></ script >
2026-05-19 21:24:56 -05:00
< script defer src = "/assets/remotedesktop-settings-menu.js" ></ script >
2026-03-05 00:04:26 -06:00
< script type = "module" src = "/assets/nav.js" ></ script >
< script type = "module" src = "/assets/remotedesktop.js" ></ script >
</ body >
</ html >
