TensorFlowJS检测头部是否摆正_js 检测人脸正中-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_77055885/article/details/135916963

本文介绍了如何利用JavaScript库clmtrackr.js和TensorFlow.js实现一个实时面部识别系统，通过计算脸部特征点之间的k值，监控头部姿态并提示用户是否头部摆正。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过脸部中间的坐标计算他的k值k=(y2-y1)/（x2-x1)，拿到他的k值以后，用最大的k比对每一个小的k计算他的差值，通过差值来判断头部是否摆正。

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.5.0"></script>
    <script src="clmtrackr.js"></script>
    <script src="main.js"></script>
</head>
<body>
    <video id="webcam" width="400" height="300" autoplay></video>
    <canvas id="overlay" width="400" height="300"></canvas>
    <div id="text_wb">

    </div>
    <style>
        #webcam, #overlay {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</body>
</html>

js部分

$(document).ready(function () {
  const video = $('#webcam')[0];
  const overlay = $('#overlay')[0];
  const overlay_eye = overlay.getContext('2d');
  const ctrack = new clm.tracker();
  ctrack.init();

  // 根据输出的数组中人脸相应位置的坐标，圈出眼睛的位置
  function getEyes(positions) {
    const minX = positions[23][0] - 5;
    const maxX = positions[28][0] + 5;
    const minY = positions[24][1] - 5;
    const maxY = positions[26][1] + 5;


    //获取中间线 33到41
    const centreminAX = positions[33][1];    //x1
    const centremaxAX = positions[41][1];    //x2
    const centreminAY = positions[33][0];    //y1
    const centremaxAY = positions[41][0];    //y2
    //k=(y2-y1)/（x2-x1)
    let A = (centremaxAY - centreminAY) / (centremaxAX - centreminAX)

    //获取中间线 41到62
    const centreminBX = positions[41][1];    //x1
    const centremaxBX = positions[62][1];    //x2
    const centreminBY = positions[41][0];    //y1
    const centremaxBY = positions[62][0];    //y2
    //k=(y2-y1)/（x2-x1)
    let B = (centremaxBY - centreminBY) / (centremaxBX - centreminBX)


    //获取中间线 62到7
    const centreminCX = positions[62][1];    //x1
    const centremaxCX = positions[7][1];     //x2
    const centreminCY = positions[62][0];    //y1
    const centremaxCY = positions[7][0];     //y2
    //k=(y2-y1)/（x2-x1)
    let C = (centremaxCY - centreminCY) / (centremaxCX - centreminCX)

    //获取中间线 7到33
    const centreminDX = positions[33][1];   //x1
    const centremaxDX = positions[7][1];    //x2
    const centreminDY = positions[33][0];   //y1
    const centremaxDY = positions[7][0];    //y2
    //k=(y2-y1)/（x2-x1)
    let D = (centremaxDY - centreminDY) / (centremaxDX - centreminDX)



    const width = maxX - minX;
    const height = maxY - minY;

    return [minX, minY, width, height, A, B, C, D];
  }

  // 持续监测人脸
  function detect() {
    // 检查是否检测到人脸
    requestAnimationFrame(detect);
    let currentPosition = ctrack.getCurrentPosition();

    overlay_eye.clearRect(0, 0, 400, 300);
    if (currentPosition) {
      //  在overlay canvas上画出检测到的人脸:
      ctrack.draw(overlay);

      // 用红色画出人眼位置:
      const eyesRect = getEyes(currentPosition);
      overlay_eye.strokeStyle = 'red';
      overlay_eye.strokeRect(eyesRect[0], eyesRect[1], eyesRect[2], eyesRect[3]);
      let A = eyesRect[4]
      let B = eyesRect[5]
      let C = eyesRect[6]
      let D = eyesRect[7]
      // let A = Math.abs(Aa);
      // let B = Math.abs(Bb);
      // let C = Math.abs(Cc);
      // let D = Math.abs(Dd);
      let arr = new Array
      arr.push(A, B, C)

      let m = arr[0] - D
      let n = arr[1] - D
      let b = arr[2] - D

      if (Math.abs(m) < 0.05 || Math.abs(n) < 0.05 || Math.abs(b) < 0.05) {
        console.log("位置正确");
      } else {
        console.log("请摆正头部");
      }
      } else {
      console.log("请移入人脸");

    }
  }

  function onStreaming(stream) {
    video.srcObject = stream;
    ctrack.start(video);
    detect();
  }

  navigator.mediaDevices
    .getUserMedia({
      video: true,
    })
    .then(onStreaming);
});