h5人脸识别/人脸检测

演示效果

实现效果步骤

1. 获取摄像头权限

navigator.mediaDevices.getUserMedia //api

2. 安装 tracking js 插件

这个主要是解决人脸跟踪检测

3. 要求当前环境是https

https 环境可以用小皮环境工具模拟开发环境

案例代码

html代码

 <video id="video" style="width: 100%;height: 80vh;"></video>
 下面的canvas 理论上不需要除非你需要别的功能例如拍照，video就足够了
  <canvas id="imgphone" src="" style="width: 100%;height: 80vh;" alt=""></canvas>

js代码

里面有些变量不存在就删除了

  var friends = ['Thomas Middleditch', 'Martin Starr', 'Zach Woods'];
  let video = document.querySelector("video")
  let canvas = document.querySelector("#imgphone")
  var ctx = canvas.getContext("2d");
  let btn3 = document.querySelector("#btn3")//调整摄像头
  let image = document.querySelector("#img")//预览
  let btn2 = document.querySelector("#btn2")
  let mediaStreamTrack = null;//媒体流变量
  let front = true;//摄像头前设置
    // 判断是否拍照
    let flag = 0
    let tipFlag = 0
 // 新建一个tracker实例 // 可选 face, eye, mouth, 需要引入相应的js
 const tracker = new tracking.ObjectTracker(['face']); 
    // 设置步长
    tracker.setInitialScale(4);
      tracker.setStepSize(1.7);
      tracker.setEdgesDensity(0.1);
    // 绑定监听方法
    tracker.on('track', handleTracked);
    function handleTracked(event) {
      if (event.data.length === 0) {
        // 没有检测到
        console.log('');
        // alert("没有检测到人脸")
      } else {
        // 提示用户已经检测到人脸
        if(!tipFlag) {
        //  alert("检测人脸成功，正在拍照，请保持不动2秒！")
        }
        
        // 1秒后拍照，仅拍一次
        if(!flag) {
          flag = 1;
          setTimeout(() => {
            // 模拟btn点击事件
            btn2.click();
            alert("拍照完成！")
            tipFlag = 1
          }, 1000);
        }
        // 人脸数据点阵处理
        // event.data.forEach(window.plot)
        // document.querySelector("#content").innerHTML = JSON.stringify(event.data)
        event.data.forEach(function(rect) {
          ctx.clearRect(0,0,canvas.width, canvas.height);
          ctx.strokeStyle = '#c48';
          ctx.strokeRect(rect.x+25, rect.y, rect.width+50, rect.height+100);
          ctx.font = '11px Helvetica';
          ctx.fillStyle = "#c48";
          ctx.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
          ctx.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
          });
      }
    }
    // 开始追踪
    tracking.track('#video', tracker);
   
  function init() {
    var constraints = {
      video: {
        // width: { min: 1024, ideal: 1280, max: 1920 },
        // height: { min: 576, ideal: 720, max: 1080 },
        facingMode: (front ? "user" : "environment")
      },
      Audio: false
    };
    window.tracking.initUserMedia_(video)
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      /**
       * facingMode 媒体类型 environment 后置摄像头 user前置摄像头
       * 
       * video 这里做兼容处理 对于相机的分辨率做出最好的优化选择
       * */
      navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
        mediaStreamTrack = stream.getTracks()[0];
        try {
          video.srcObject = stream;
        } catch (error) {
          video.src = window.URL.createObjectURL(stream);
        }
        video.onloadedmetadata = function (e) {
          video.play();
          canvas.width = video.videoWidth;
          canvas.height = video.videoHeight;
        };
      }).catch(function (err) {
        console.log(err);
      })
    }
  }
  //监听拍照
  btn2.addEventListener('click', () => {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    ctx.drawImage(video, 0, 0,
      video.videoWidth
      , video.videoHeight);
    image.src = canvas.toDataURL("image/png");
  })
  init()
  btn3.addEventListener('click', () => {
    front = !front
    mediaStreamTrack.stop()
    init()
  })

  //监听关闭摄像头
  // document.querySelector("#btn1").addEventListener('click', () => {
  //  
  // })

demo 地址：码云
技术交流群：978775008