springboot+springSecurity+vue+百度云AI实现人脸登录（客户端）

最新推荐文章于 2023-03-31 08:03:22 发布

Java小许

最新推荐文章于 2023-03-31 08:03:22 发布

阅读量1k

点赞数 1

分类专栏：人工智能 vuex springboot 文章标签：百度 vue.js 小程序

本文链接：https://blog.csdn.net/qq_36715887/article/details/120278165

版权

这篇博客介绍了如何在前端实现人脸登录功能，包括在登录界面添加人脸登录按钮，用户点击后调用摄像头随机拍摄面部头像，并将图片发送到后端进行验证。后端接收到请求后，对人脸进行验证并与数据库中的信息比对，成功后返回验证结果。整个流程涉及前端的视频流处理、canvas截图、图片上传以及后端的人脸识别技术。

摘要由CSDN通过智能技术生成

1、在登录界面中新加人脸登录按钮



<el-button type="primary" style="width: 150px" @click="faceLogin" >人脸登录</el-button>

http://localhost:8080/#/faceLogin
 faceLogin(){
      this.$router.push('/faceLogin');
    },


{
        path: '/facelogin',
        name: 'facelogin',
        component: facelogin,
        hidden:true
    }

效果是

落地页随机拍摄的面部头像

2.按钮跳转到落地页随机拍摄的面部头像界面

<template>
  <div class="login-container">
    <div class="login-form" v-show="canvasShow">
      <p class="titleInfo">请把正脸对准摄像头</p>
      <div class="regInfo">
        <!-- <div class="tip">没有检测到脸</div> -->
        <div class="canvas">

          <!--描绘video截图-->
          <canvas ref="cav" id="canvas" width="200" height="200"></canvas>
          <!--video用于显示媒体设备的视频流，自动播放-->
          <video ref="vd" id="video" autoplay playsinline style="width: 200px;height: 200px"></video>
        </div>
        </div>
        <p style="text-align:center;padding:50px 0 0"><el-button id="capture" ref="capture" @click='handleClick'>拍 照</el-button> </p>
        <!-- <img :src='imgUrl' width="100" height="100"> -->
    </div>
    <div v-show="tipShow" class="tipShow">
      <el-alert