HTML5弱网自适应帧率录制需前端主动调控：一、用WebRTC采集流并applyConstraints动态调帧率；二、fetch探测带宽触发降级；三、依dataavailable间隔反馈调整帧率与码率；四、移动端绕音频焦点干扰。
在HTML5中用MediaRecorder实现弱网下的自适应帧率录制，核心不是“MediaRecorder自己调节帧率”，而是前端主动监控网络与设备状态，并动态重配媒体流编码参数——因为MediaRecorder本身不暴露帧率控制接口，必须通过上游的MediaStreamTrack或WebRTC RTCRtpSender（若走WebRTC采集）来干预。
以下四点是落地关键：
一、优先选用WebRTC采集流而非getUserMedia直连
MediaRecorder对底层编码器无控制权，但WebRTC（如通过RTCPeerConnection或getDisplayMedia/getUserMedia返回的track）允许调用applyConstraints()或setParameters()实时调整。
- 若使用摄像头/屏幕共享：获取track后立即设置初始约束
const videoTrack = stream.getVideoTracks()[0]; await videoTrack.applyConstraints({ width: { ideal: 1280 }, height: { ideal: 720 }, frameRate: { ideal: 30, max: 30 } // 先设上限 }); - 后续弱网触发时，可降为
{ frameRate: { max: 15 } }或{ frameRate: { max: 10 } }
二、实时监测可用带宽并触发帧率降级
不要依赖navigator.connection.downlink（延迟高、不准），改用轻量探测：
立即学习“前端免费学习笔记（深入）”；
- 每2秒用
fetch请求一个100KB小文件，记录responseEnd - startTime，估算瞬时吞吐 - 若连续3次测得带宽 < 1.2 Mbps → 触发帧率下调
- 若带宽回升且缓冲水位 > 8 秒 → 可试探性恢复（需加防抖，避免震荡）
三、结合MediaRecorder的dataavailable节律做缓冲反馈
MediaRecorder每生成一个Blob片段（通常400–800ms），说明当前编码节奏可行；若连续2次ondataavailable间隔 > 1200ms，大概率是编码卡顿或输入帧丢弃：
- 此时立即对videoTrack调用
applyConstraints({ frameRate: { max: Math.max(5, currentMax - 5) } }) - 同步降低
bitrateLimit（如有）：await videoTrack.applyConstraints({ bitrateLimit: 1_200_000 // 单位bps，配合帧率下调 });
四、移动端必须绕过系统音频焦点干扰
iOS/Android在录音启动时常强制降媒体音量，间接导致预览画面卡顿、帧生成不稳：
- iOS：创建静音AudioContext保持焦点
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) { const ctx = new (window.AudioContext || window.webkitAudioContext)(); const osc = ctx.createOscillator(); const gain = ctx.createGain(); gain.gain.value = 0; osc.connect(gain).connect(ctx.destination); osc.start(); } - Android：提示用户手动禁用“通话降音”类省电模式，或在UI显式标注“请勿切换音频输出设备”
不复杂但容易忽略的是：帧率自适应必须和分辨率缩放、码率限制协同生效。单降帧率而分辨率不变，会导致单帧数据量激增，反而加重弱网压力。
