root/webRtc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【m】增加画质选择

Browse Source
This commit is contained in:
stary
2026-04-25 21:55:47 +08:00
parent d48ce78c03
commit fd06063d83
5 changed files with 331 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
WebApp/client/public/onebyone/index.html
View File

@@ -468,14 +468,53 @@
</button>
<!-- 更多选项 -->
<button
class="control-btn w-12 h-12 rounded-full glass flex items-center justify-center text-white hover:bg-white/10 relative group">
<i class="fas fa-ellipsis-h text-lg"></i>
<span
class="absolute -top-10 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-black/80 rounded text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
更多选项
</span>
</button>
<div class="relative">
<button id="moreOptionsBtn"
class="control-btn w-12 h-12 rounded-full glass flex items-center justify-center text-white hover:bg-white/10 relative group">
<i class="fas fa-ellipsis-h text-lg"></i>
<span
class="absolute -top-10 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-black/80 rounded text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
更多选项
</span>
</button>
<!-- 更多选项下拉菜单 -->
<div id="moreOptionsMenu" class="hidden absolute bottom-full left-1/2 transform -translate-x-1/2 mb-3 glass rounded-xl shadow-lg w-52 z-50">
<!-- 分辨率选项 -->
<div class="p-3 border-b border-white/10">
<h4 class="text-xs font-medium text-gray-400 mb-2 flex items-center gap-2">
<i class="fas fa-desktop text-xs"></i>
视频分辨率
</h4>
<div class="space-y-1" id="resolutionOptions">
<button onclick="changeResolution(480, 270)" data-resolution="480"
class="resolution-option w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg hover:bg-white/10 transition-colors">
<span>流畅 480p</span>
<span class="text-xs text-gray-500">省流量</span>
</button>
<button onclick="changeResolution(1280, 720)" data-resolution="720"
class="resolution-option w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg hover:bg-white/10 transition-colors">
<span>高清 720p</span>
<span class="text-xs text-gray-500">推荐</span>
</button>
<button onclick="changeResolution(1920, 1080)" data-resolution="1080"
class="resolution-option active w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg hover:bg-white/10 transition-colors">
<span>超清 1080p</span>
<span class="text-xs text-gray-500"></span>
</button>
<button onclick="changeResolution(2560, 1440)" data-resolution="1440"
class="resolution-option w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg hover:bg-white/10 transition-colors">
<span>2K 1440p</span>
<span class="text-xs text-gray-500">最高画质</span>
</button>
</div>
</div>
<!-- 当前分辨率指示 -->
<div class="px-3 py-2 flex items-center gap-2">
<i class="fas fa-info-circle text-xs text-gray-500"></i>
<span id="currentResolutionText" class="text-xs text-gray-500">当前: 1080p</span>
</div>
</div>
</div>
<!-- 结束通话 -->
<!-- [EVENT: onclick => endCall()] [API: POST /api/call/:callId/leave] -->