避开这些坑！WebRTC人体姿态识别项目实战中的5个常见问题

去年我接手了一个在线健身指导平台的开发项目，核心需求是让用户通过浏览器摄像头完成标准动作的实时评估。最初以为用上WebRTC和现成的姿态估计模型就能轻松搞定，结果从原型到上线踩的坑比预想的多得多。从本地开发时的摄像头权限问题，到移动端上模型推理的卡顿，再到不同浏览器下关键点坐标的诡异抖动，几乎每一步都有意想不到的“惊喜”。

如果你也正在或计划用JavaScript+WebRTC开发类似的动作识别应用，这篇文章或许能帮你省下不少调试时间。我将结合自己的实战经验，梳理出五个最常遇到且容易让人头疼的问题，并提供经过验证的解决方案。这些经验主要面向有一定前端和机器学习基础，但缺乏完整项目落地经验的中级开发者。

1. HTTPS限制与本地开发环境的优雅绕过

几乎所有现代浏览器都强制要求，通过getUserMedia()访问摄像头时，页面必须运行在HTTPS协议下，或者通过localhost、127.0.0.1等本地环回地址访问。这个安全策略的本意是好的，但在开发初期，尤其是需要多设备联调时，却成了第一道拦路虎。

1.1 问题的本质与影响范围

这个限制源于安全上下文（Secure Context） 策略。浏览器将getUserMedia、Geolocation API等涉及用户隐私的API归类为“强大功能”，只允许在安全的环境中调用。如果你在普通的HTTP站点（比如http://192.168.1.100:8080）上尝试，控制台会直接抛出类似NavigatorUserMediaError的错误，并且不会弹出摄像头权限请求。

更麻烦的是，在移动设备上通过IP地址预览开发中的页面，也会因为协议是HTTP而失败。这意味着你无法在真机上快速测试移动端的兼容性。

1.2 本地开发解决方案

对于纯前端开发，最直接的方法是使用localhost。但如果你需要从手机或平板访问电脑上的开发服务器，就需要一些额外配置。

方案一：自签名证书 + HTTPS本地服务器 这是最接近生产环境的方案。你可以用mkcert或openssl快速生成一个受本地信任的证书。

# 使用 mkcert (推荐，简单)
# 1. 安装 mkcert
# 2. 为 localhost 和你的本地IP安装证书
mkcert -install
mkcert localhost 192.168.1.100

# 3. 在开发服务器配置中使用这些证书
# 例如，使用 Vite：
# vite.config.js
import { defineConfig } from 'vite'
import fs from 'fs'
import path from 'path'

export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'localhost+2-key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, 'localhost+2.pem')),
    },
    host: '0.0.0.0' // 允许网络访问
  }
})

方案二：使用 ngrok 或 localtunnel 等内网穿透工具 这类工具能为你本地的HTTP服务创建一个临时的、带HTTPS的公共URL。

# 使用 ngrok (需要注册账号获取token)
ngrok http 8080

执行后，你会得到一个类似 https://abc123.ngrok.io 的地址，在任何设备上访问这个地址都能正常调用摄像头。

方案三：开发浏览器的特殊标志（仅限测试） 对于Chrome和Edge，可以在启动时添加特殊参数临时禁用这个限制，但绝对不要用于生产环境或日常浏览。

# Windows
chrome.exe --unsafely-treat-insecure-origin-as-secure="http://192.168.1.100:8080" --user-data-dir=/tmp/foo

# macOS
open -n -a "Google Chrome" --args --unsafely-treat-insecure-origin-as-secure="http://192.168.1.100:8080" --user-data-dir=/tmp/foo

注意：方案三会创建一个全新的、独立的浏览器用户数据目录，避免污染你的主配置。测试完毕后请务必关闭该浏览器实例。

1.3 生产环境部署要点

生产环境就没什么捷径了，你必须部署有效的SSL证书。现在通过Let‘s Encrypt等免费服务获取证书非常方便。部署后，记得在代码中做好协议判断，给用户清晰的提示。

// 在尝试获取媒体流之前进行环境检查
function checkSecureContext() {
  if (!window.isSecureContext) {
    alert('此功能需要HTTPS安全连接。请确保您的网站通过HTTPS访问。');
    return false;
  }
  return true;
}

async function initCamera() {
  if (!checkSecureContext()) return;
  
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    // ... 处理视频流
  } catch (err) {
    console.error('获取摄像头失败:', err);
    // 根据错误类型给出友好提示，例如权限被拒绝、设备未找到等
  }
}

2. 跨设备与浏览器的兼容性迷宫

你以为在Chrome上跑得流畅，在Safari或低端安卓机上就一定能行？现实往往会给你上一课。不同浏览器对WebRTC的实现、视频编解码器的支持、甚至getUserMedia的约束参数解析都存在差异。

2.1 视频格式与编解码器的差异

getUserMedia允许你通过constraints参数指定期望的视频分辨率、帧率等。但不同浏览器和设备的能力天差地别。一台高端PC可能轻松输出1080p@60fps，而一部旧手机可能连720p@30fps都吃力。

核心策略：渐进增强与能力检测 不要写死参数，而是先探测设备能力，然后选择一个最合适的配置。

// 一个更健壮的获取视频流函数
async function getOptimizedVideoStream() {
  const constraints = {
    video: {
      width: { ideal: 1280, max: 1920 },
      height: { ideal: 720, max: 1080 },
      frameRate: { ideal: 30, min: 15 }, // 帧率不宜过高，30fps对多数姿态估计模型已足够
      facingMode: 'user' // 优先使用前置摄像头
    },
    audio: false
  };

  try {
    // 先尝试理想配置
    let stream = await navigator.mediaDevices.getUserMedia(constraints);
    const videoTrack = stream.getVideoTracks()[0];
    const settings = videoTrack.getSettings();
    
    console.log(`实际获取的视频参数: ${settings.width}x${settings.height} @ ${settings.frameRate || '未知'}fps`);
    
    // 如果实际帧率过低，可以尝试降低分辨率来换取帧率
    if (settings.frameRate && settings.frameRate < 20) {
      console.warn('帧率过低，尝试降低分辨率...');
      videoTrack.stop(); // 停止之前的track
      
      const fallbackConstraints = {
        video: {
          width: { ideal: 640 },
          height: { ideal: 480 },
          frameRate: { ideal: 24 }
        },
        audio: false
      };
      stream = await navigator.mediaDevices.getUserMedia(fallbackConstraints);
    }
    
    return stream;
  } catch (err) {
    console.error('无法获取优化的视频流，尝试最基础配置:', err);
    // 终极回退方案
    return await navigator.mediaDevices.getUserMedia({
      video: true, // 不指定任何约束，让浏览器决定
      audio: false
    });
  }
}

2.2 浏览器API前缀与特性支持

尽管现代浏览器对WebRTC的支持已经很好，但一些边缘情况仍需处理。例如，Safari在较老版本中可能需要webkit前缀。

// 兼容性封装：获取mediaDevices对象
function getMediaDevices() {
  // 处理可能的浏览器前缀
  const navigator = window.navigator;
  return navigator.mediaDevices || 
         navigator.webkitMediaDevices || 
         navigator.mozMediaDevices || 
         navigator.msMediaDevices;
}

// 兼容性封装：getUserMedia
async function getUserMedia(constraints) {
  const mediaDevices = getMediaDevices();
  if (!mediaDevices || !mediaDevices.getUserMedia) {
    // 如果连旧版API都没有，提示用户升级浏览器
    const legacyGetUserMedia = navigator.getUserMedia || 
                               navigator.webkitGetUserMedia || 
                               navigator.mozGetUserMedia || 
                               navigator.msGetUserMedia;
    
    if (legacyGetUserMedia) {
      // 将Promise风格转换为回调风格
      return new Promise((resolve, reject) => {
        legacyGetUserMedia.call(navigator, constraints, resolve, reject);
      });
    } else {
      throw new Error('您的浏览器不支持访问摄像头。请使用Chrome、Firefox、Edge或Safari（iOS 11+）等现代浏览器。');
    }
  }
  
  return mediaDevices.getUserMedia(constraints);
}

2.3 移动端特有的挑战

在移动设备上，你还需要额外考虑几个问题：

1. 屏幕方向：手机横屏/竖屏切换时，视频流的宽高比会变化，可能导致Canvas绘制错位。需要监听orientationchange或resize事件，并重新调整Canvas和模型输入尺寸。
2. 性能与发热：持续运行姿态估计模型非常耗电，在移动端可能导致设备发热和电池快速耗尽。需要实现“节流”机制，比如只在用户明确开始训练时进行检测，或降低检测频率。
3. 前后摄像头切换：提供UI让用户切换摄像头。注意，切换时最好先停止之前的track，再请求新的。

// 切换摄像头示例
let currentStream = null;

async function switchCamera() {
  if (currentStream) {
    // 停止所有track以释放摄像头
    currentStream.getTracks().forEach(track => track.stop());
  }
  
  const constraints = {
    video: {
      facingMode: (currentFacingMode === 'user') ? 'environment' : 'user'
    },
    audio: false
  };
  
  try {
    currentStream = await navigator.mediaDevices.getUserMedia(constraints);
    currentFacingMode = constraints.video.facingMode;
    // 将新的stream赋值给video元素
    videoElement.srcObject = currentStream;
  } catch (err) {
    console.error('切换摄像头失败:', err);
  }
}

3. 模型初始化延迟与首帧卡顿优化

当你兴致勃勃地加载了TensorFlow.js或MediaPipe的模型，准备大干一场时，第一个打击往往是：第一次检测怎么这么慢？ 用户打开页面后，可能要等上好几秒甚至十几秒才能看到第一个姿态关键点。

3.1 延迟的根源分析

这种延迟主要来自几个方面：

延迟来源	描述	典型耗时
模型加载	从网络下载模型权重文件（.bin, .json）。模型越大，耗时越长。	1-10秒
模型预热	TensorFlow.js或WebAssembly运行时初始化，以及模型的第一次编译/推理。	0.5-3秒
视频流就绪	浏览器启动摄像头、申请权限、获取第一帧有效数据。	0.5-2秒
首帧检测	模型对第一张图像进行前向传播计算。	0.1-1秒

3.2 实战优化策略

策略一：预加载与懒加载结合 不要在页面加载时就初始化所有模型。将核心的、必须的模型（如姿态检测器）进行预加载，而辅助模型或可选功能（如手势识别）可以懒加载。

// 预加载核心姿态模型
let poseDetector = null;

async function preloadPoseModel() {
  // 显示加载提示
  showLoadingIndicator('正在加载姿态检测模型...');
  
  // 根据设备能力选择模型变体
  const modelType = tf.getBackend() === 'webgl' ? poseDetection.SupportedModels.MoveNet : poseDetection.SupportedModels.BlazePose;
  const modelConfig = {
    runtime: 'tfjs', // 或 'mediapipe'
    modelType: 'lite' // 移动端或低性能设备用'lite'，桌面端可用'heavy'
  };
  
  try {
    poseDetector = await poseDetection.createDetector(modelType, modelConfig);
    console.log('姿态模型加载完成');
    hideLoadingIndicator();
    
    // 可选：进行一次虚拟推理以完成“预热”
    const warmUpTensor = tf.zeros([1, 256, 256, 3]);
    await poseDetector.estimatePoses(warmUpTensor);
    warmUpTensor.dispose();
    console.log('模型预热完成');
  } catch (error) {
    console.error('模型加载失败:', error);
    hideLoadingIndicator();
    showError('无法加载姿态检测功能，请刷新页面重试。');
  }
}

// 在页面加载早期、用户交互前调用
window.addEventListener('load', () => {
  // 可以先加载一个轻量级的骨架，再预加载模型
  preloadPoseModel();
});

策略二：流式处理与队列机制 不要等模型完全加载好再处理视频流。可以先将视频流设置好并播放，模型加载完成后立即开始检测。同时，使用一个简单的队列机制，避免在模型推理时堆积过多的帧。

let isModelReady = false;
let frameQueue = [];
let isProcessing = false;

// 视频流就绪后就开始捕获帧
videoElement.onplaying = () => {
  requestAnimationFrame(processVideoFrame);
};

async function processVideoFrame() {
  if (!isModelReady) {
    // 模型未就绪，只绘制视频，不检测
    drawVideoToCanvas();
    requestAnimationFrame(processVideoFrame);
    return;
  }
  
  // 捕获当前帧
  const canvas = document.getElementById('outputCanvas');
  const ctx = canvas.getContext('2d');
  ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  
  // 如果正在处理上一帧，跳过这一帧（丢帧）
  if (isProcessing) {
    requestAnimationFrame(processVideoFrame);
    return;
  }
  
  isProcessing = true;
  try {
    const poses = await poseDetector.estimatePoses(videoElement); // 直接使用video元素
    // 渲染关键点
    renderPoses(poses);
  } catch (err) {
    console.error('姿态估计失败:', err);
  } finally {
    isProcessing = false;
    requestAnimationFrame(processVideoFrame);
  }
}

// 当模型加载完成时
poseDetector = await poseDetection.createDetector(...);
isModelReady = true;
console.log('开始实时姿态检测');

策略三：降低首帧输入分辨率 模型的第一次推理往往最慢。你可以先用一个非常低的分辨率（如128x128）进行第一次检测，让模型快速完成初始化，然后再切换到实际需要的分辨率。

async function warmUpModel(detector, videoElement) {
  // 创建一个临时的低分辨率canvas
  const tempCanvas = document.createElement('canvas');
  tempCanvas.width = 128;
  tempCanvas.height = 128;
  const tempCtx = tempCanvas.getContext('2d');
  
  // 绘制一帧缩小的图像
  tempCtx.drawImage(videoElement, 0, 0, 128, 128);
  
  // 使用低分辨率图像进行第一次估计
  await detector.estimatePoses(tempCanvas);
  console.log('模型低分辨率预热完成');
}

4. 关键点抖动与平滑滤波实战

即使模型本身很准确，直接使用其输出的关键点坐标也会出现明显的抖动。这种抖动在视频中表现为关键点“闪烁”或“跳动”，严重影响用户体验和后续的动作分析。

4.1 抖动原因分析

抖动主要源于：

1. 模型预测噪声：神经网络对每一帧的预测都存在微小误差。
2. 光照与背景变化：摄像头自动曝光、白平衡调整会导致输入图像变化。
3. 视频压缩与运动模糊：快速运动时，图像模糊会导致关键点定位困难。

4.2 一维卡尔曼滤波器的应用

卡尔曼滤波器是一种高效的递归滤波器，能根据当前观测值和历史状态，估计出系统的最优状态。对于关键点的每个坐标（x, y, 甚至z或置信度score），我们都可以独立应用一个一维卡尔曼滤波器。

下面是一个简化版的卡尔曼滤波器实现，专门用于平滑关键点坐标：

class OneEuroFilter {
  /**
   * 一阶低通滤波与速度预测结合，适合人体姿态平滑
   * @param {number} minCutoff 最小截止频率，控制平滑程度
   * @param {number} beta 速度系数，控制对速度变化的响应
   * @param {number} dCutoff 速度项的截止频率
   */
  constructor(minCutoff = 1.0, beta = 0.0, dCutoff = 1.0) {
    this.minCutoff = minCutoff;
    this.beta = beta;
    this.dCutoff = dCutoff;
    this.xPrev = null; // 上一时刻的位置
    this.dxPrev = 0;   // 上一时刻的速度
    this.tPrev = null; // 上一时刻的时间戳
  }

  smoothingFactor(cutoff, dt) {
    const r = 2 * Math.PI * cutoff * dt;
    return r / (r + 1);
  }

  exponentialSmoothing(a, x, xPrev) {
    return a * x + (1 - a) * xPrev;
  }

  filter(x, t) {
    if (this.tPrev === null) {
      // 第一帧，直接返回
      this.xPrev = x;
      this.tPrev = t;
      return x;
    }

    const dt = (t - this.tPrev) / 1000; // 转换为秒
    if (dt <= 0) return x;

    // 首先平滑速度
    const ed = this.smoothingFactor(this.dCutoff, dt);
    const dx = (x - this.xPrev) / dt;
    const dxHat = this.exponentialSmoothing(ed, dx, this.dxPrev);

    // 根据速度调整截止频率
    const cutoff = this.minCutoff + this.beta * Math.abs(dxHat);

    // 然后平滑位置
    const ea = this.smoothingFactor(cutoff, dt);
    const xHat = this.exponentialSmoothing(ea, x, this.xPrev);

    // 更新状态
    this.xPrev = xHat;
    this.dxPrev = dxHat;
    this.tPrev = t;

    return xHat;
  }
}

// 为每个关键点的每个坐标创建滤波器
class PoseSmoother {
  constructor(numKeypoints) {
    this.filters = [];
    for (let i = 0; i < numKeypoints; i++) {
      this.filters.push({
        x: new OneEuroFilter(1.0, 0.1), // 调整参数以达到理想效果
        y: new OneEuroFilter(1.0, 0.1),
        // 如果有z或score，也可以添加
        // z: new OneEuroFilter(1.0, 0.1),
        // score: new OneEuroFilter(0.1, 0.0) // score通常不需要太强的平滑
      });
    }
  }

  smooth(poses, timestamp = Date.now()) {
    return poses.map(pose => {
      const smoothedKeypoints = pose.keypoints.map((kp, idx) => {
        const filter = this.filters[idx];
        return {
          ...kp,
          x: filter.x.filter(kp.x, timestamp),
          y: filter.y.filter(kp.y, timestamp),
          // 保留原始置信度，或轻微平滑
          score: kp.score
        };
      });
      return { ...pose, keypoints: smoothedKeypoints };
    });
  }
}

// 使用示例
const smoother = new PoseSmoother(17); // 假设是17个关键点的模型
let lastTimestamp = 0;

function processFrameWithSmoothing() {
  const poses = await poseDetector.estimatePoses(videoElement);
  const now = performance.now();
  const smoothedPoses = smoother.smooth(poses, now);
  renderPoses(smoothedPoses);
}

4.3 参数调优与效果对比

一阶低通滤波器的效果很大程度上取决于minCutoff和beta两个参数：

• minCutoff：控制基础平滑强度。值越小，平滑越强，但延迟也越大。对于人体姿态，通常从1.0开始尝试。
• beta：控制对速度变化的响应。当动作快速变化时，增大beta可以减少滞后。对于健身动作，0.1是个不错的起点。

你可以创建一个简单的调试面板，实时调整这些参数并观察效果：

// 简单的参数调试UI
const params = {
  minCutoff: 1.0,
  beta: 0.1,
  dCutoff: 1.0
};

// 使用dat.gui或自己创建滑块
const gui = new dat.GUI();
gui.add(params, 'minCutoff', 0.1, 5.0).onChange(() => {
  // 重新初始化所有滤波器
  smoother = new PoseSmoother(17, params.minCutoff, params.beta, params.dCutoff);
});
gui.add(params, 'beta', 0.0, 2.0).onChange(() => { /* 同上 */ });

4.4 处理关键点丢失与异常值

有时模型会暂时丢失某个关键点（置信度score很低或为0）。直接使用这些点会导致滤波器“记住”错误位置。一个简单的策略是设置一个置信度阈值，低于该阈值时，不使用该点更新滤波器，而是使用预测值或保持上一次的有效值。

class RobustPoseSmoother extends PoseSmoother {
  constructor(numKeypoints, confidenceThreshold = 0.3) {
    super(numKeypoints);
    this.confidenceThreshold = confidenceThreshold;
    this.lastValidKeypoints = Array(numKeypoints).fill(null);
  }

  smooth(poses, timestamp) {
    if (poses.length === 0) return [];
    
    const pose = poses[0]; // 假设只处理单人
    const smoothedKeypoints = pose.keypoints.map((kp, idx) => {
      const filter = this.filters[idx];
      
      if (kp.score < this.confidenceThreshold) {
        // 关键点置信度过低，使用上一次的有效值或滤波器的预测值
        if (this.lastValidKeypoints[idx]) {
          // 返回上一次的有效位置（可以结合滤波器状态）
          return {
            ...kp,
            x: this.lastValidKeypoints[idx].x,
            y: this.lastValidKeypoints[idx].y
          };
        } else {
          // 还没有有效值，返回当前点（尽管置信度低）
          return kp;
        }
      } else {
        // 置信度足够，正常滤波并记录
        const smoothed = {
          ...kp,
          x: filter.x.filter(kp.x, timestamp),
          y: filter.y.filter(kp.y, timestamp)
        };
        this.lastValidKeypoints[idx] = { x: smoothed.x, y: smoothed.y };
        return smoothed;
      }
    });
    
    return [{ ...pose, keypoints: smoothedKeypoints }];
  }
}

5. 移动端性能瓶颈与针对性优化

在桌面Chrome上跑得飞起的应用，放到手机上可能直接卡成幻灯片。移动端的性能瓶颈主要来自三个方面：CPU/GPU算力有限、内存带宽小、发热降频。

5.1 模型选择与量化

不是所有姿态估计模型都适合移动端。你需要根据目标设备选择或调整模型。

模型选型参考：

模型	特点	适用场景	移动端友好度
MoveNet (Lightning)	超轻量，17个关键点，速度快	实时性要求极高，精度要求一般	★★★★★
MoveNet (Thunder)	比Lightning稍重，精度更高	需要更好精度，可接受稍低帧率	★★★★☆
BlazePose (lite)	33个关键点，包含面部和手部	需要更丰富的关键点（如手势）	★★★☆☆
PoseNet (MobileNetV1)	较老，但兼容性好	老旧设备或需要广泛兼容性	★★★☆☆

使用TensorFlow.js的量化模型： 许多模型提供INT8量化版本，在精度损失很小的情况下，大幅减少模型体积和推理时间。确保你加载的是针对移动端优化的模型。

import * as poseDetection from '@tensorflow-models/pose-detection';

// 检测WebGL后端是否支持INT8量化（某些移动设备可能不支持）
const backend = tf.getBackend();
const isQuantizedSupported = backend === 'webgl' || backend === 'webgpu';

const modelConfig = {
  runtime: 'tfjs',
  modelType: 'lite',
  enableSmoothing: true,
  // 如果支持，尝试使用量化模型
  ...(isQuantizedSupported && { quantBytes: 4 }) // 4表示INT8量化
};

const detector = await poseDetection.createDetector(
  poseDetection.SupportedModels.MoveNet,
  modelConfig
);

5.2 输入分辨率与推理频率的动态调整

不要总是用最高分辨率喂给模型。在移动端，降低输入尺寸是提升性能最有效的方法之一。

动态分辨率策略：

1. 根据设备性能（通过navigator.hardwareConcurrency和帧率监测）选择初始分辨率。
2. 实时监测推理耗时，如果连续几帧超过预算（如33ms，对应30fps），自动降低分辨率。
3. 当设备空闲或动作简单时，可以尝试提升分辨率以获得更精细的关键点。

class AdaptivePoseDetector {
  constructor() {
    this.currentResolution = 256; // 初始分辨率
    this.performanceHistory = [];
    this.targetFrameTime = 33; // 目标每帧耗时(ms)，对应~30fps
    this.detector = null;
  }

  async initialize() {
    this.detector = await poseDetection.createDetector(...);
    this.detectPerformanceAndAdjust();
  }

  async estimatePoses(videoElement) {
    const startTime = performance.now();
    
    // 根据当前分辨率调整输入
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = this.currentResolution;
    canvas.height = this.currentResolution;
    
    // 保持宽高比绘制视频帧
    const videoRatio = videoElement.videoWidth / videoElement.videoHeight;
    let drawWidth, drawHeight;
    if (videoRatio > 1) {
      drawWidth = this.currentResolution;
      drawHeight = this.currentResolution / videoRatio;
    } else {
      drawHeight = this.currentResolution;
      drawWidth = this.currentResolution * videoRatio;
    }
    
    ctx.drawImage(videoElement, 0, 0, drawWidth, drawHeight);
    
    // 执行检测
    const poses = await this.detector.estimatePoses(canvas);
    
    const endTime = performance.now();
    const inferenceTime = endTime - startTime;
    
    // 记录性能并可能调整分辨率
    this.recordPerformance(inferenceTime);
    
    // 将关键点坐标映射回原始视频尺寸
    return this.scalePosesBack(poses, videoElement.videoWidth, videoElement.videoHeight, drawWidth, drawHeight);
  }

  recordPerformance(inferenceTime) {
    this.performanceHistory.push(inferenceTime);
    if (this.performanceHistory.length > 10) {
      this.performanceHistory.shift();
    }
    
    const avgTime = this.performanceHistory.reduce((a, b) => a + b, 0) / this.performanceHistory.length;
    
    // 动态调整分辨率
    if (avgTime > this.targetFrameTime * 1.2 && this.currentResolution > 128) {
      // 性能不足，降低分辨率
      this.currentResolution = Math.max(128, this.currentResolution * 0.8);
      console.log(`性能不足，降低分辨率至: ${this.currentResolution}`);
      this.performanceHistory = []; // 重置历史
    } else if (avgTime < this.targetFrameTime * 0.8 && this.currentResolution < 512) {
      // 性能有余，提高分辨率
      this.currentResolution = Math.min(512, this.currentResolution * 1.2);
      console.log(`性能有余，提高分辨率至: ${this.currentResolution}`);
      this.performanceHistory = [];
    }
  }

  scalePosesBack(poses, originalWidth, originalHeight, processedWidth, processedHeight) {
    const scaleX = originalWidth / processedWidth;
    const scaleY = originalHeight / processedHeight;
    
    return poses.map(pose => ({
      ...pose,
      keypoints: pose.keypoints.map(kp => ({
        ...kp,
        x: kp.x * scaleX,
        y: kp.y * scaleY
      }))
    }));
  }
}

5.3 离屏Canvas与Web Worker

将视频绘制和模型推理放到Web Worker中，可以避免阻塞主线程，防止UI卡顿。但要注意，TensorFlow.js在Worker中的初始化可能更慢，且与主线程传递大型数据（如图像）有成本。

更实用的策略：使用离屏Canvas进行渲染 将关键点渲染等图形操作放在另一个Canvas中，与视频绘制分离。

<!-- 主页面 -->
<video id="video" autoplay playsinline></video>
<canvas id="poseCanvas" style="position: absolute; left: 0; top: 0;"></canvas>

// 使用两个Canvas：一个用于视频，一个专用于姿态渲染
const videoCanvas = document.createElement('canvas');
const videoCtx = videoCanvas.getContext('2d');
const poseCanvas = document.getElementById('poseCanvas');
const poseCtx = poseCanvas.getContext('2d');

// 调整Canvas尺寸以匹配视频
function resizeCanvases() {
  const video = document.getElementById('video');
  poseCanvas.width = videoCanvas.width = video.videoWidth;
  poseCanvas.height = videoCanvas.height = video.videoHeight;
}

// 渲染循环
function renderLoop() {
  // 1. 将视频绘制到离屏Canvas
  videoCtx.drawImage(videoElement, 0, 0, videoCanvas.width, videoCanvas.height);
  
  // 2. 使用离屏Canvas的图像数据进行姿态估计
  const imageData = videoCtx.getImageData(0, 0, videoCanvas.width, videoCanvas.height);
  // ... 处理姿态估计
  
  // 3. 清空姿态Canvas并绘制关键点
  poseCtx.clearRect(0, 0, poseCanvas.width, poseCanvas.height);
  drawKeypoints(poseCtx, poses);
  
  requestAnimationFrame(renderLoop);
}

5.4 内存管理与Tensor清理

TensorFlow.js的Tensor会占用WebGL内存，如果不及时清理，会导致内存泄漏，在移动端尤其致命。

async function detectPose() {
  let poses = null;
  try {
    // estimatePoses可能会返回Tensor，需要手动管理
    poses = await detector.estimatePoses(videoElement);
    
    // 处理poses...
    renderPoses(poses);
  } catch (error) {
    console.error('Detection error:', error);
  } finally {
    // 重要：如果poses包含tensor，确保清理
    if (poses && poses.length > 0 && poses[0].keypoints3D) {
      // 假设keypoints3D是tensor
      tf.dispose(poses[0].keypoints3D);
    }
    // 强制进行垃圾回收提示（非标准，但有时有用）
    if (global.gc) global.gc();
  }
}

// 定期检查内存使用
setInterval(() => {
  const memoryInfo = tf.memory();
  console.log(`Tensor数量: ${memoryInfo.numTensors}, 内存: ${(memoryInfo.numBytes / 1024 / 1024).toFixed(2)}MB`);
  
  if (memoryInfo.numTensors > 100) {
    console.warn('Tensor数量过多，考虑检查内存泄漏');
  }
}, 10000);

5.5 发热控制与省电策略

长时间运行姿态估计会让手机发烫，触发降频，导致性能下降。可以采取以下策略：

1. 间歇性检测：如果不是需要每帧都检测（如健身计数），可以每2-3帧检测一次。
2. 基于运动的检测：检测到用户静止时，降低检测频率或暂停检测。
3. 页面可见性API：当用户切换到其他标签页时，暂停检测。

// 基于页面可见性的控制
let isDetecting = true;

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('页面不可见，暂停检测');
    isDetecting = false;
  } else {
    console.log('页面恢复可见，继续检测');
    isDetecting = true;
  }
});

// 在检测循环中
async function detectionLoop() {
  if (!isDetecting) {
    requestAnimationFrame(detectionLoop);
    return;
  }
  
  // 执行检测...
  
  // 控制检测频率：每2帧检测一次
  setTimeout(() => {
    requestAnimationFrame(detectionLoop);
  }, 1000 / 15); // 目标15fps检测
}

这些优化策略需要根据你的具体应用场景进行组合和调整。在我的健身项目中，通过实施上述大部分优化，最终在2018年的中端安卓机上也能达到25fps的稳定检测，用户体验得到了质的提升。