程序人生网站首页 程序人生

利用mediapipe实现人脸识别及人脸距离屏幕距离计算

发布时间：2023-10-15 20:45:06编辑：雪饮阅读（）

https://mediapipe-studio.webapps.google.com/studio/demo/face_landmarker

https://medium.com/@susanne.thierfelder/create-your-own-depth-measuring-tool-with-mediapipe-facemesh-in-javascript-ae90abae2362

https://codepen.io/Susanne-Thierfelder/pen/yLEOQXq

if(results.faceLandmarks.length>0){

  if(typeof(results.faceLandmarks[0])!="undefined"){

    //左眼坐标

    let left_x1=results.faceLandmarks[0][471].x;

    let left_x2=results.faceLandmarks[0][469].x;



    let left_y1=results.faceLandmarks[0][471].y;

    let left_y2=results.faceLandmarks[0][469].y;



    //右眼坐标

    let right_x1=results.faceLandmarks[0][476].x;

    let right_x2=results.faceLandmarks[0][474].x;



    let right_y1=results.faceLandmarks[0][476].y;

    let right_y2=results.faceLandmarks[0][474].y;



    console.log("左眼x1",left_x1);

    console.log("左眼x2",left_x2);



    console.log("右眼x1",right_x1);

    console.log("右眼x2",right_x2);





    //var irisLeftMinX = -1;

    //实际情况是要计算深度的时候要反转坐标

    var left_x1_f=right_x1;

    var left_x2_f=right_x2;



    var right_x1_f=left_x1;

    var right_x2_f=left_x2;



    console.log("计算深度左眼x1",left_x1_f);

    console.log("计算深度左眼x2",left_x2_f);



    console.log("计算深度右眼x1",right_x1_f);

    console.log("计算深度右眼x2",right_x2_f);



    var irisLeftMinX = left_x1_f * canvasElement.width;

    var irisLeftMaxX = left_x2_f * canvasElement.width;



    var irisRightMinX = right_x1_f * canvasElement.width;

    var irisRightMaxX = right_x2_f * canvasElement.width;



    console.log("左眼最大深度irisLeftMaxX",irisLeftMaxX);

    console.log("左眼最小深度irisLeftMinX",irisLeftMinX);



    console.log("右眼最大深度irisRightMaxX",irisRightMaxX);

    console.log("右眼最小深度irisRightMinX",irisRightMinX);





    var left_dx = irisLeftMaxX - irisLeftMinX;

    var right_dx=irisRightMaxX-irisRightMinX;

    //人眼的水平虹膜直径大致保持在 11.7±0.5 毫米。

    var dX = 11.7;

    //Logitech HD Pro C922 Norm focal

    // 罗技 HD Pro C922 标准焦点

    var normalizedFocaleX = 1.40625;

    var fx = Math.min(canvasElement.width, canvasElement.height) * normalizedFocaleX;



    //常量10是1厘米等于10毫米

    var left_dZ = (fx * (dX / left_dx)) / 10.0;

    var right_dZ=(fx * (dX / right_dx)) / 10.0;

    //左右眼分别与相机距离的均值

    var dZ=((left_dZ+right_dZ)/2.0).toFixed(2);

    layer.msg("距离:"+dZ+"cm");







    let zuogen=Math.pow(Math.pow(left_x1-left_x2,2)+Math.pow(left_y1-left_y2,2),0.5);

    let yougen=Math.pow(Math.pow(right_x1-right_x2,2)+Math.pow(right_y1-right_y2,2),0.5);



    let averageValue=((zuogen+yougen)/2).toFixed(2);

 //0.025平均值示例数据1，38对应真实距离

// layer.msg("averageValue:"+(averageValue/(0.025/38)).toFixed(2)+"cm");



  }

}

https://nikatsanka.github.io/camera-calibration-using-opencv-and-python.html

https://storage.googleapis.com/mediapipe-assets/documentation/mediapipe_face_landmark_fullsize.png

<!-- Copyright 2023 The MediaPipe Authors.



Licensed under the Apache License, Version 2.0 (the "License");

you may not use this file except in compliance with the License.

You may obtain a copy of the License at



     http://www.apache.org/licenses/LICENSE-2.0



Unless required by applicable law or agreed to in writing, software

distributed under the License is distributed on an "AS IS" BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and

limitations under the License. -->

<html>

<head>

  <meta charset="utf-8">

  <meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">

  <meta http-equiv="Pragma" content="no-cache">

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <title>Face Landmarker</title>



  <link href="./css/camera.css" rel="stylesheet">

  <script src="./js/jquery.js"></script>

  <script src="./js/layer/layer.js"></script>



  <script type="text/javascript">

    document.write("<script src='./js/camera.js?time="+new Date().getTime()+"' type='module'><\/script>");

  </script>

</head>

<body>

  <div id="liveView" class="videoView">

    <button id="webcamButton" class="mdc-button mdc-button--raised">

      <span class="mdc-button__ripple"></span>

      <span class="mdc-button__label">ENABLE WEBCAM</span>

    </button>

    <div style="position: relative;">

      <video id="webcam" style="position: abso" autoplay playsinline></video>

      <canvas class="output_canvas" id="output_canvas" style="position: absolute; left: 0px; top: 0px;"></canvas>

    </div>

  </div>

  <div class="blend-shapes">

    <ul class="blend-shapes-list" id="video-blend-shapes"></ul>

  </div>

</body>

</html>

// Copyright 2023 The MediaPipe Authors.



// Licensed under the Apache License, Version 2.0 (the "License");

// you may not use this file except in compliance with the License.

// You may obtain a copy of the License at



//      http://www.apache.org/licenses/LICENSE-2.0



// Unless required by applicable law or agreed to in writing, software

// distributed under the License is distributed on an "AS IS" BASIS,

// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

// See the License for the specific language governing permissions and

// limitations under the License.



/* import vision from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.3"; */

/*相当于从这个js里面https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.3/wasm/vision_wasm_internal.js:9*/

/* import vision from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.3"; */

/* import vision from "cdn.jsdelivr.net_npm_@mediapipe_tasks-vision@0.10.3"; */

/* import vision from "cdn.jsdelivr.net_npm_@mediapipe_tasks-vision@0.10.3_wasm_vision_wasm_internal"; */

/* import vision from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.3"; */





import vision from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.3";

/*import vision from "./tasks-vision";*/

console.log("vision");

const { FaceLandmarker, FilesetResolver, DrawingUtils } = vision;

const videoBlendShapes = document.getElementById("video-blend-shapes");



let faceLandmarker;



let enableWebcamButton;



let webcamRunning= false;

const videoWidth = 720;



let video=null;

let canvasElement=null;

let canvasCtx=null;





let lastVideoTime = -1;

let results = undefined;

let timer=null;



function BlobToBlobURL(BlobFile,type) {

  // application/octet-stream,image/jpeg"

  let blob = new Blob([BlobFile], { type : type });

  const blobUrl = URL.createObjectURL(blob);

  return blobUrl ;

}

function urlToBlobBase64(imgUrl){

  return new Promise((resolve) => {

    window.URL = window.URL || window.webkitURL;

    var xhr = new XMLHttpRequest();

    xhr.open("get", imgUrl, true);

    xhr.responseType = "blob";

    xhr.onload = function () {

      if (this.status == 200) {

        var blob = this.response;

        let oFileReader = new FileReader();

        oFileReader.onloadend = function (e) {

          resolve({ code:"success",blob});

        };

        oFileReader.readAsDataURL(blob);

      } else {

        resolve({ code:"fail"});

      }

    };

    xhr.send();

    xhr.onerror = function(){

      resolve({ code:"fail"});

    };

  });

}



// Before we can use HandLandmarker class we must wait for it to finish

// loading. Machine Learning models can be large and take a moment to

// get everything needed to run.

async function createFaceLandmarker() {

 /* const filesetResolver = await FilesetResolver.forVisionTasks(

    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.3/wasm"

  ); */





  console.log("layer",layer);

  var layerLoadIndex=layer.load();

  const filesetResolver = await FilesetResolver.forVisionTasks(

    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.3/wasm"

  );

  layer.close(layerLoadIndex);

  /*

    modelAssetPath: `https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task`,

  */

  var layerLoadIndex=layer.load();

  var urlToBlobBase64Res= await urlToBlobBase64("./model/face_landmarker.task");

  layer.close(layerLoadIndex);

  if(urlToBlobBase64Res.code=="fail"){

    return layer.msg("获取模型失败",{icon:2});

  }

  console.log("urlToBlobBase64Res.blob",urlToBlobBase64Res.blob);

  // `./model/face_landmarker.task`



  var layerLoadIndex=layer.load();

  var modelAssetPath=BlobToBlobURL(urlToBlobBase64Res.blob,"application/octet-stream");

  layer.close(layerLoadIndex);

  var layerLoadIndex=layer.load();

  faceLandmarker = await FaceLandmarker.createFromOptions(filesetResolver, {

    baseOptions: {

      modelAssetPath: modelAssetPath

      /* delegate: "GPU" */

    },

    outputFaceBlendshapes: true,

    runningMode:'VIDEO',

    numFaces: 1

  });

  layer.close(layerLoadIndex);

  //demosSection.classList.remove("invisible");

}

//检测用户设备是否支持获取摄像头视频流

function hasGetUserMedia() {

  return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);

}



//采集视频流事件绑定

function webcamBind(){

  video = document.getElementById("webcam");

  canvasElement = document.getElementById("output_canvas");

  canvasCtx = canvasElement.getContext("2d");

  if (hasGetUserMedia()==false){

    return layer.msg("getUserMedia() is not supported by your browser",{icon:2});

  }

  //开启采集视频流事件绑定

  enableWebcamButton = document.getElementById("webcamButton");

  enableWebcamButton.addEventListener("click", enableCam);

}

//获取用户媒体结果

function getUserMediaRes(){

  return new Promise(function(resolve, reject){

    navigator.mediaDevices.getUserMedia(

        {

          video: {

            facingMode:'user'

          }

        }).then(function(stream){

      resolve({code:"success",data:stream});

    }).catch(function(error){

      resolve({code:"fail",data:error});

    });

  });

}



// 启动Cam

async function enableCam(event) {

  if (!faceLandmarker) {

    console.log("Wait! faceLandmarker not loaded yet.");

    layer.msg("Wait! faceLandmarker not loaded yet.",{icon:2});

    return;

  }



  if (webcamRunning === true) {

    webcamRunning = false;

    enableWebcamButton.innerText = "ENABLE PREDICTIONS";

  } else {

    webcamRunning = true;

    enableWebcamButton.innerText = "DISABLE PREDICTIONS";

  }







  var layerIndex=layer.load();

  var getUserMediaResData=await getUserMediaRes();

  layer.close(layerIndex);

  if(getUserMediaResData.code=="success"){

    video.srcObject = getUserMediaResData.data;

    video.addEventListener("loadeddata", predictWebcam);

  }

  if(getUserMediaResData.code=="fail"){

    var error=getUserMediaResData.data;

    console.log("getUserMedia 错误:", error);



    console.log("getUserMedia 错误 name:", error.name);





    if (error.name === 'NotAllowedError') {

      // 用户未授予访问权限

      console.log('用户未授予访问权限');

      layer.msg('用户未授予访问权限',{icon:2});

    }

    if(error.name=='NotReadableError'){

      layer.msg('没有数据可读，请检查摄像头是否被占用',{icon:2});

    }







    if (error.name === 'NotFoundError') {

      // 摄像头或麦克风未找到

      layer.msg('摄像头或麦克风未找到',{icon:2});

    }

  }



}

//预览Webcam

async function predictWebcam() {

  const drawingUtils = new DrawingUtils(canvasCtx);

  const radio = video.videoHeight / video.videoWidth;

  video.style.width = videoWidth + "px";

  video.style.height = videoWidth * radio + "px";

  canvasElement.style.width = videoWidth + "px";

  canvasElement.style.height = videoWidth * radio + "px";

  canvasElement.width = video.videoWidth;

  canvasElement.height = video.videoHeight;



  console.log(" canvasElement.width", canvasElement.width);



  let startTimeMs = performance.now();

  if (lastVideoTime !== video.currentTime) {

    lastVideoTime = video.currentTime;

    results = faceLandmarker.detectForVideo(video, startTimeMs);

  }



  //console.log("脸部数据测试",results.faceBlendshapes);

  //console.log("results.faceBlendshapes.length",results.faceBlendshapes.length);

  if(results.faceBlendshapes.length>0){

    console.log("检测到脸部");

    //layer.msg("检测到脸部");

  }

  else{

    console.log("未检测到脸部");

    layer.msg("未检测到脸部");

  }

  console.log("results",results);

  console.log("results.faceLandmarks478",results.faceLandmarks);

  if(results.faceLandmarks.length>0){

    if(typeof(results.faceLandmarks[0])!="undefined"){

      //左眼坐标

      let left_x1=results.faceLandmarks[0][471].x;

      let left_x2=results.faceLandmarks[0][469].x;



      let left_y1=results.faceLandmarks[0][471].y;

      let left_y2=results.faceLandmarks[0][469].y;



      //右眼坐标

      let right_x1=results.faceLandmarks[0][476].x;

      let right_x2=results.faceLandmarks[0][474].x;



      let right_y1=results.faceLandmarks[0][476].y;

      let right_y2=results.faceLandmarks[0][474].y;



      console.log("左眼x1",left_x1);

      console.log("左眼x2",left_x2);



      console.log("右眼x1",right_x1);

      console.log("右眼x2",right_x2);





      //var irisLeftMinX = -1;

      //实际情况是要计算深度的时候要反转坐标

      var left_x1_f=right_x1;

      var left_x2_f=right_x2;



      var right_x1_f=left_x1;

      var right_x2_f=left_x2;



      console.log("计算深度左眼x1",left_x1_f);

      console.log("计算深度左眼x2",left_x2_f);



      console.log("计算深度右眼x1",right_x1_f);

      console.log("计算深度右眼x2",right_x2_f);



      var irisLeftMinX = left_x1_f * canvasElement.width;

      var irisLeftMaxX = left_x2_f * canvasElement.width;



      var irisRightMinX = right_x1_f * canvasElement.width;

      var irisRightMaxX = right_x2_f * canvasElement.width;



      console.log("左眼最大深度irisLeftMaxX",irisLeftMaxX);

      console.log("左眼最小深度irisLeftMinX",irisLeftMinX);



      console.log("右眼最大深度irisRightMaxX",irisRightMaxX);

      console.log("右眼最小深度irisRightMinX",irisRightMinX);





      var left_dx = irisLeftMaxX - irisLeftMinX;

      var right_dx=irisRightMaxX-irisRightMinX;

      //人眼的水平虹膜直径大致保持在 11.7±0.5 毫米。

      var dX = 11.7;

      //Logitech HD Pro C922   Norm focal

      // 罗技 HD Pro C922 标准焦点

      var normalizedFocaleX = 1.40625;

      var fx = Math.min(canvasElement.width, canvasElement.height) * normalizedFocaleX;



      //常量10是1厘米等于10毫米

      var left_dZ = (fx * (dX / left_dx)) / 10.0;

      var right_dZ=(fx * (dX / right_dx)) / 10.0;

      //左右眼分别与相机距离的均值

      var dZ=((left_dZ+right_dZ)/2.0).toFixed(2);

      layer.msg("距离:"+dZ+"cm");







      let zuogen=Math.pow(Math.pow(left_x1-left_x2,2)+Math.pow(left_y1-left_y2,2),0.5);

      let yougen=Math.pow(Math.pow(right_x1-right_x2,2)+Math.pow(right_y1-right_y2,2),0.5);



      let averageValue=((zuogen+yougen)/2).toFixed(2);

     //0.025平均值示例数据1，38对应真实距离

    // layer.msg("averageValue:"+(averageValue/(0.025/38)).toFixed(2)+"cm");



    }

  }



  if (results.faceLandmarks) {



    for (const landmarks of results.faceLandmarks) {

      drawingUtils.drawConnectors(

          landmarks,

          FaceLandmarker.FACE_LANDMARKS_TESSELATION,

          { color: "#C0C0C070", lineWidth: 1 }

      );

      console.log("右眼数据", FaceLandmarker.FACE_LANDMARKS_RIGHT_EYE);

      drawingUtils.drawConnectors(

          landmarks,

          FaceLandmarker.FACE_LANDMARKS_RIGHT_EYE,

          { color: "#FF3030" }

      );

      drawingUtils.drawConnectors(

          landmarks,

          FaceLandmarker.FACE_LANDMARKS_RIGHT_EYEBROW,

          { color: "#FF3030" }

      );

      console.log("左眼数据",FaceLandmarker.FACE_LANDMARKS_LEFT_EYE);

      drawingUtils.drawConnectors(

          landmarks,

          FaceLandmarker.FACE_LANDMARKS_LEFT_EYE,

          { color: "#30FF30" }

      );

      drawingUtils.drawConnectors(

          landmarks,

          FaceLandmarker.FACE_LANDMARKS_LEFT_EYEBROW,

          { color: "#30FF30" }

      );

      drawingUtils.drawConnectors(

          landmarks,

          FaceLandmarker.FACE_LANDMARKS_FACE_OVAL,

          { color: "#E0E0E0" }

      );

      drawingUtils.drawConnectors(

          landmarks,

          FaceLandmarker.FACE_LANDMARKS_LIPS,

          { color: "#E0E0E0" }

      );

      drawingUtils.drawConnectors(

          landmarks,

          FaceLandmarker.FACE_LANDMARKS_RIGHT_IRIS,

          { color: "#FF3030" }

      );

      drawingUtils.drawConnectors(

          landmarks,

          FaceLandmarker.FACE_LANDMARKS_LEFT_IRIS,

          { color: "#30FF30" }

      );

    }

  }

  drawBlendShapes(videoBlendShapes, results.faceBlendshapes);



  // Call this function again to keep predicting when the browser is ready.

  if (webcamRunning === true) {

    window.requestAnimationFrame(predictWebcam);

  }

}



//脸部数据结果参数细节

function drawBlendShapes(el, blendShapes) {

  if (!blendShapes.length) {

    return;

  }



  console.log(blendShapes[0]);



  let htmlMaker = "";

  blendShapes[0].categories.map((shape) => {

    htmlMaker += `

      <li class="blend-shapes-item">

        <span class="blend-shapes-label">${

        shape.displayName || shape.categoryName

    }</span>

        <span class="blend-shapes-value" style="width: calc(${

        +shape.score * 100

    }% - 120px)">${(+shape.score).toFixed(4)}</span>

      </li>

    `;

  });



  el.innerHTML = htmlMaker;

}



console.log("createFaceLandmarker开始执行");

//创建模型对象

createFaceLandmarker();

//采集视频流事件绑定

webcamBind();







var layerLoadIndex=layer.load();

/*setTimeout(function(){

  layer.close(layerLoadIndex);

  $("#webcamButton").click();

},1500);*/

timer=setInterval(function(){

  if (faceLandmarker){

    layer.close(layerLoadIndex);

    $("#webcamButton").click();

    clearInterval(timer);

  }

});







$(function(){



})

虹膜测距方案补充：

关键字词：mediapipe,人脸识别,距离

上一篇：15447 - 在线商城功能设置 Woocommerce设置

下一篇：20244 - 税收设定 Tax

根据地图经纬度计算距离

您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

利用mediapipe实现人脸识别及人脸距离屏幕距离计算

相关文章

您当前的位置：首页 > 慢生活 > 程序人生网站首页程序人生