使用Vercel部署SolidJS+daisyUI的纯前端人脸识别项目

背景

又是一年毕业季，到了大学生毕设答辩的时候了。想起来自己两年前的毕设被老师点评过人脸识别功能摆的位置不合理（为了凑工作量加的功能🫠），趁着这两天还不算忙，自己试试做一下她建议的人脸识别登录，这里记录一下过程。

代码仓库与演示地址：

代码仓库：HyaCiovo/FaceLoginHya (github.com)

演示地址：HyaCiovo/FaceLoginHya (vercel.app)

（因为删除了个人第三方平台的信息，所以无法演示完整功能😥，想要体验人脸登录功能需要自行注册百度智能云平台，使用免费的人脸对比API。体验人脸库操作的人脸回显功能需使用到阿里云oss）

相关代码库与第三方平台：

前端：SolidJS（写起来比React还爽，就是没有我最爱的Antd😥）、solid-router、solid-use、daisyUI（好用好看，写小项目小Demo很适合😙）、tracking.js

第三方平台：阿里云oss、百度智能云、Vercel

流程：

主要是浏览器调起前置摄像头借助tracking.js识别人脸；识别到人脸后用canvas“拍照”并上传到百度智能云平台；百度智能云平台将照片与人脸库进行对比，并返回对比结果到客户端；客户端将返回的结果与用户信息对比来实现登录功能。通过Vercel平台直接部署本项目。

效果：

移动端：

PC端：

注意：

• 由于隐私问题，不会上传完整代码。阿里云oss和百度智能云相关id和密钥配置可在"src/configs/constants.ts"文件中修改；

• 登录页的很多背景图因为都是本人从别家扒的，所以也不放进项目中了👻；

• 本人因为图省事纯前端操作，阿里云oss设置了公共读，写操作也是直接客户端操作没怎么搞STS访问控制，这是不安全的；

• 人脸识别本地调试时，摄像头只能在localhost和https上调起，如果要在移动端调起需要配上https，可在vite.config.ts中打开注释

  import { defineConfig } from "vite";
  import solidPlugin from "vite-plugin-solid";
  import { resolve } from "path";
  // import basicSsl from "@vitejs/plugin-basic-ssl"; // https调试
  
  export default defineConfig({
    // ...
    plugins: [
      solidPlugin(),
      // basicSsl() // 本地https调试
    ],
    server: {
      // https: true, // 本地https调试
      host: "0.0.0.0",
      open: true,
      port: 3000,
  	// ...
    },
  });
  

• 直接部署到Vercel上的前端项目不会去处理跨域问题，需要开发者在根目录新建vercel.json和api/proxy.js文件并参考vite.config.ts来配置:

  vite.config.ts: vercel.json: api/proxy.js: 切记安装 http-proxy-middleware ！！！😈😈😈😈

最后

本文仅做记录，这个项目只是“小玩具”，用来练练手，没有任何准确性和安全性可言😎。精准的人脸识别项目还是要花钱上各大厂商的成熟产品。