关于html5:解锁新技能手势识别隔空打飞机

飞机大战置信大家都玩过，好多同学甚至本人写过，不论你是用js还是用java，是用原生代码实现还是应用游戏引擎实现。无非就是应用鼠标或者手指触控来在屏幕上拖动飞机挪动来打飞机，但我置信你应该还没有玩过应用手势隔空来管制飞机吧。

那明天咱们就来开发一款飞机大战游戏，而后应用手势隔空操控飞机。

先上demo：飞机大战

留神：须要开启电脑摄像头

MediaPipe

为了实现手势管制，咱们就须要可能通过电脑摄像头来辨认手部的动作。这里咱们应用到了MediaPip。

MediaPipe 是一款由 Google Research 开发并开源的多媒体机器学习模型利用框架。在谷歌，一系列重要产品，如、Google Lens、ARCore、Google Home 以及，都已深度整合了 MediaPipe。

作为一款跨平台框架，MediaPipe 不仅能够被部署在服务器端，更能够在多个挪动端（安卓和苹果 iOS）和嵌入式平台（Google Coral 和树莓派）中作为设施端机器学习推理（On-device Machine Learning Inference）框架

Media Pip反对应用js实现人脸网格拓扑，人脸检测，手部检测，全身检测和姿态辨认等。

手部辨认

为了实现应用手势管制飞机，那么咱们须要辨认出手部动作。

MediaPip能够辨认人手，并且将手部构造按关节进行拓扑，辨认后果为保留在两个对象中：

MULTI_HAND_LANDMARKS：保留了每个手的关节信息
MULTI_HANDEDNESS：保留多个手部信息，比方是左手还是右手

手势管制飞机原理

原理很简略，就是应用摄像头手别手部，MediaPip能够辨认手部21个关节，咱们能够应用食指尖这个点来管制飞机挪动。即下标为8的点：INDEX_FINGER_TIP的坐标赋值给飞机。其实就相当于应用食指代替了鼠标。

代码实现

好，原理分明之后，上代码：

创立html文件，引入三个js库：

 <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>

index.html

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>  <link rel="stylesheet" href="demo.css"></head><body>  <div class="container">    <!-- 小飞机 -->    ![](./img/hero.png)    <!-- video用来开启摄像头 -->    <video class="input_video"></video>    <!-- 用来绘制辨认内容 -->    <canvas class="output_canvas" width="1280px" height="720px" ></canvas>        <!-- loading 成果，当摄像头开启胜利后会暗藏 -->    <div class="loading">      <div class="spinner"></div>      <div class="message">        Loading      </div>    </div>  </div>  <script src="./demo.js"></script></body></html>

创立Hands对象：

const hands = new Hands({  locateFile: (file) => {    return `https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.1/${file}`;  }});

外面这个file是为了辨认手须要加载的资源文件。

设置默认选项：

hands.setOptions({  selfieMode: true, //是否自拍，即是否应用前置摄像头  maxNumHands: 1,  //最大辨认手部数量  minDetectionConfidence: 0.5,  //辨认精度，这个数值越高，则要求图像高评分能力被辨认 默认 0.5  minTrackingConfidence: 0.5 //跟踪速度，数值越高，破费工夫越长});

开启摄像头，把摄像头捕获的画面传给hands对象：

const camera = new Camera(videoElement, {  onFrame: async () => {    await hands.send({ image: videoElement });  },  width: 1280,  height: 720});camera.start();

获取辨认后果：

function onResults(results) {  // 暗藏loading动画  document.body.classList.add('loaded');  // Draw the overlays.  canvasCtx.save();  // 清空画布  canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);  // 绘制摄像头捕获画面  canvasCtx.drawImage(    results.image, 0, 0, canvasElement.width, canvasElement.height);    // 辨认后果保留在multiHandLandmarks和multiHandedness对象中，如果这两个对象不为null，则阐明辨认胜利  if (results.multiHandLandmarks && results.multiHandedness) {        // 遍历multiHandLandmarks，取得每个hand的信息    for (let index = 0; index < results.multiHandLandmarks.length; index++) {      const classification = results.multiHandedness[index];      const isRightHand = classification.label === 'Right';      // 一个手的关节信息      const landmarks = results.multiHandLandmarks[index];      // 下标为8的关节就是食指,坐标值为宽高的百分比，和画布宽高相乘就失去坐标      let x = landmarks[8].x * 1280;      let y = landmarks[8].y * 720;      //把手指坐标赋值非小飞机      hero.style.left = x - 50 + 'px';      hero.style.top = y - 40 + 'px';      // 绘制手部拓扑图      drawConnectors(        canvasCtx, landmarks, HAND_CONNECTIONS,        { color: isRightHand ? '#00FF00' : '#FF0000' }),        drawLandmarks(canvasCtx, landmarks, {          color: isRightHand ? '#00FF00' : '#FF0000',          fillColor: isRightHand ? '#FF0000' : '#00FF00',          radius: (x) => {            return lerp(x.from.z, -0.15, .1, 10, 1);          }        });    }  }  canvasCtx.restore();}hands.onResults(onResults);

辨认后果保留在multiHandLandmarks和multiHandedness对象中：

multiHandLandmarks是一个二维数组，每一个数组中保留了21个关节坐标信息。把食指坐标赋值给飞机，就能够管制飞机挪动了。

而后再加一点点细节，咱们的飞机大战就实现了：

好了实现了。

后话

这里咱们只实现了简略的追随成果。如果再通过计算关节之间的地位关系和静止方向，那么就能够辨认更简单的手势，比方实现手势翻页，点击按钮，相似华为手机的手势辨认。

不过除此之外，咱们还能够做得更多，加上面部辨认和体态辨认，你甚至能够开发体感游戏。

前期我也会尝试开发一些更有意思的利用，欢送大家继续关注。

残缺代码

关注公众号H5Talks ，在公众号后盾回复：飞机大战获取残缺代码。

如果本文对你有帮忙，欢送关注、点赞、评论。