better view for webcam
This commit is contained in:
KingKDot
@@ -22,61 +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="cameraSelect">Camera</label>
|
||||
<select
|
||||
id="cameraSelect"
|
||||
class="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-slate-100 min-w-56"
|
||||
></select>
|
||||
<button id="refreshCameras" 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 class="flex items-center gap-2 text-slate-200" for="fpsInput">
|
||||
<span>FPS</span>
|
||||
<input id="fpsInput" type="number" min="1" max="120" value="30" class="bg-slate-800 border border-slate-700 rounded px-2 py-1 w-20 text-slate-100" />
|
||||
</label>
|
||||
<button id="applyFps" class="button ghost">
|
||||
<i class="fa-solid fa-sliders"></i><span>Apply</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-sky-400"
|
||||
/>
|
||||
<span id="qualityValue" class="pill pill-ghost text-slate-100">90%</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>
|
||||
<label class="flex items-center gap-2 text-slate-200" title="Streaming transport. P2P: browser ↔ agent direct (H.264 required). Relayed: through MediaMTX. Canvas: existing WS path.">
|
||||
<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>
|
||||
@@ -101,6 +47,95 @@
|
||||
<span class="uppercase tracking-wide text-xs text-slate-500">fps</span>
|
||||
<span id="viewerFps" class="pill pill-ghost font-mono text-sky-200">--</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">Camera</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-sm text-slate-300 w-20" for="cameraSelect">Camera</label>
|
||||
<select
|
||||
id="cameraSelect"
|
||||
class="flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100"
|
||||
></select>
|
||||
<button id="refreshCameras" class="button ghost" title="Refresh camera 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-sky-400"
|
||||
/>
|
||||
<span id="qualityValue" class="pill pill-ghost text-slate-100 text-xs min-w-[44px] text-center">90%</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 (H.264 required). Relayed: through MediaMTX. Canvas: existing WS path.">
|
||||
<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 gap-2 mb-2">
|
||||
<label class="text-sm text-slate-300 w-20" for="fpsInput">Max FPS</label>
|
||||
<input id="fpsInput" type="number" min="1" max="120" value="30" class="flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-100" />
|
||||
<button id="applyFps" class="button ghost" title="Apply FPS">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</button>
|
||||
</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">
|
||||
<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 while viewing webcam">
|
||||
<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 uses raw PCM; WebRTC modes use an audio track.">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -136,6 +171,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/webcam.js"></script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user