14、手势识别与控制：手部关键点检测、手势分类器训练、WebRTC交互控制（静音/举手/翻页）

各位好，欢迎来到第十四章。今天聊的话题很有意思——用手势来控制WebRTC会议。

说实话，我第一次在视频会议里看到有人用手势静音时，第一反应是「这玩意儿靠谱吗？」后来自己动手做了一遍，发现其实技术路径很清晰。说白了，就是三个步骤：先找到手在哪，再判断手在做什么，最后把结果映射成控制指令。

嗯，咱们一步步拆开来看。

14.1 手部关键点检测：让机器「看见」手

要让机器理解手势，首先得知道手的位置和姿态。目前最成熟的做法是用MediaPipe的Hand Landmarker模型。它能输出21个关键点，覆盖手指关节、掌心、指尖。

我在项目中遇到过一个问题：当手快速移动时，检测会丢帧。后来发现是输入帧率太高，模型处理不过来。我的建议是控制输入帧率在15fps左右，既能保证流畅度，又不会让CPU过载。

代码实现其实不复杂。下面是一个典型的初始化流程：

// 初始化MediaPipe Hand Landmarker
const handLandmarker = await HandLandmarker.createFromOptions(
  filesetResolver,
  {
    baseOptions: {
      modelAssetPath: 'hand_landmarker.task',
      delegate: 'GPU'
    },
    runningMode: 'VIDEO',
    numHands: 2
  }
);

// 每帧检测
function detectHands(video) {
  const result = handLandmarker.detectForVideo(video, performance.now());
  return result.landmarks; // 返回21个关键点坐标
}

你想想看，21个点就够了吗？对于大多数手势识别来说，够了。但如果你要做精细的手指弯曲识别，我建议额外计算相邻点之间的角度和距离。

14.2 手势分类器训练：从关键点到语义

有了关键点坐标，下一步就是判断「这是什么手势」。这里有两种思路：

• 规则法：根据关键点之间的几何关系硬编码判断逻辑
• 机器学习法：收集样本训练一个轻量分类器

我个人习惯先用规则法快速验证，再切换到机器学习法提升鲁棒性。为什么？因为规则法调试起来直观，你能立刻知道哪里出了问题。

14.2.1 规则法示例：判断「比心」手势

function isHeartGesture(landmarks) {
  // 拇指尖(4)和食指尖(8)靠近
  const thumbTip = landmarks[4];
  const indexTip = landmarks[8];
  const distance = Math.hypot(
    thumbTip.x - indexTip.x,
    thumbTip.y - indexTip.y
  );
  // 其他手指弯曲（指尖到手腕距离较短）
  const wrist = landmarks[0];
  const middleTip = landmarks[12];
  const middleDist = Math.hypot(
    middleTip.x - wrist.x,
    middleTip.y - wrist.y
  );
  return distance < 0.05 && middleDist < 0.3;
}

嗯，这里要注意阈值的选择。不同摄像头距离、不同手型大小，阈值都得微调。我曾经因为阈值设得太死，导致用户必须把手贴到摄像头前才能识别——那体验太差了。

14.2.2 机器学习法：训练一个手势分类器

如果你想要更通用的方案，可以训练一个简单的KNN或SVM分类器。特征向量就用21个关键点的归一化坐标，加上一些角度特征。

手势	特征向量维度	样本数建议	典型应用
静音	42（21点×2坐标）	200+	捂住麦克风
举手	42	200+	举手发言
翻页	42	300+	左右滑动

14.3 WebRTC交互控制：把手势变成指令

检测到手势后，怎么控制WebRTC？说白了就是调用对应的API。

14.3.1 静音控制

// 检测到「静音手势」时
function handleMuteGesture() {
  const audioTrack = localStream.getAudioTracks()[0];
  if (audioTrack) {
    audioTrack.enabled = !audioTrack.enabled;
    // 发送信令通知远端
    dataChannel.send(JSON.stringify({
      type: 'mute',
      muted: !audioTrack.enabled
    }));
  }
}

这里有个坑：enabled控制的是本地是否发送音频，但不会改变远端的显示状态。你需要通过DataChannel同步状态，让远端UI也更新。

14.3.2 举手控制

举手功能在大型会议里特别实用。实现方式是在本地维护一个举手状态，通过DataChannel广播给所有人。

let handRaised = false;

function handleRaiseHandGesture() {
  handRaised = !handRaised;
  // 在本地UI显示举手图标
  showHandIcon(handRaised);
  // 通知远端
  dataChannel.send(JSON.stringify({
    type: 'raise_hand',
    raised: handRaised,
    userId: localUserId
  }));
}

14.3.3 翻页控制

翻页手势通常用左右滑动来实现。这里需要检测手部的移动方向，而不是静态手势。

let lastHandX = null;

function detectSwipe(landmarks) {
  const currentX = landmarks[9].x; // 中指根部
  if (lastHandX === null) {
    lastHandX = currentX;
    return null;
  }
  const deltaX = currentX - lastHandX;
  lastHandX = currentX;
  
  if (deltaX > 0.1) return 'next';
  if (deltaX < -0.1) return 'prev';
  return null;
}

嗯，这里要注意滑动速度。太慢会被忽略，太快可能漏检。我建议把deltaX的阈值和帧间隔结合起来，比如每帧移动超过屏幕宽度的5%才算一次有效滑动。

14.4 整体架构与流程

把上面这些串起来，整个系统的流程是这样的：

这个流程看起来简单，但实际落地时每个环节都有坑。我总结几个关键点：

• 延迟控制：从手势发生到指令生效，延迟最好控制在200ms以内。超过500ms用户就会觉得「卡」。
• 误触防护：不是所有手部动作都是意图手势。我建议加一个「确认窗口」——手势保持超过500ms才触发。
• 多手处理：如果画面里出现多只手，优先处理离摄像头最近的那只，或者让用户指定主控手。

好了，这一章的内容就到这里。手势识别和控制这块，说白了就是「看手→懂手→用手」。技术本身不复杂，难的是在各种光线、角度、手型下都能稳定工作。多收集真实场景的数据，多调阈值，慢慢就能打磨出好用的产品。

---

公众号:蓝海资料掘金营，微信deep3321