├── app.vue
├── .npmrc
├── assets
    ├── 1.png
    ├── 2.jpg
    ├── 3.png
    ├── 4.png
    └── qrcode.png
├── plugins
    ├── vconsole.client.ts
    └── tracking.client.ts
├── composables
    ├── useUserCamera.ts
    └── useFaceTrack.ts
├── tsconfig.json
├── nuxt.config.ts
├── uno.config.ts
├── .gitignore
├── package.json
├── pages
    ├── index.vue
    ├── result.vue
    └── face.vue
└── README.md


/app.vue:
--------------------------------------------------------------------------------
1 | 
2 | <template>
3 |   <NuxtPage />
4 | </template>
5 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/assets/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KeJunMao/h5-face-track-demo/HEAD/assets/1.png


--------------------------------------------------------------------------------
/assets/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KeJunMao/h5-face-track-demo/HEAD/assets/2.jpg


--------------------------------------------------------------------------------
/assets/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KeJunMao/h5-face-track-demo/HEAD/assets/3.png


--------------------------------------------------------------------------------
/assets/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KeJunMao/h5-face-track-demo/HEAD/assets/4.png


--------------------------------------------------------------------------------
/assets/qrcode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KeJunMao/h5-face-track-demo/HEAD/assets/qrcode.png


--------------------------------------------------------------------------------
/plugins/vconsole.client.ts:
--------------------------------------------------------------------------------
1 | import VConsole from "vconsole";
2 | export default defineNuxtPlugin(() => {
3 |   new VConsole();
4 | });
5 | 


--------------------------------------------------------------------------------
/plugins/tracking.client.ts:
--------------------------------------------------------------------------------
1 | import "tracking";
2 | import "tracking/build/data/face-min";
3 | export default defineNuxtPlugin(() => {});
4 | 


--------------------------------------------------------------------------------
/composables/useUserCamera.ts:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | export function useUserCamera() {
4 |   return useUserMedia({
5 |     constraints: { video: { facingMode: "user" }, audio: false },
6 |   });
7 | }
8 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // https://nuxt.com/docs/guide/concepts/typescript
 3 |   "extends": "./.nuxt/tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "types": [
 6 |       "tracking"
 7 |     ]
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | // https://nuxt.com/docs/api/configuration/nuxt-config
2 | export default defineNuxtConfig({
3 |   ssr: false,
4 |   devtools: { enabled: true },
5 |   modules: ["@vueuse/nuxt", "@vant/nuxt", "@unocss/nuxt"],
6 | });
7 | 


--------------------------------------------------------------------------------
/uno.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig, presetIcons, presetUno } from "unocss";
 2 | 
 3 | export default defineConfig({
 4 |   presets: [
 5 |     presetUno(),
 6 |     presetIcons({
 7 |       scale: 1.2,
 8 |       autoInstall: false
 9 |     }),
10 |   ],
11 | });
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .nuxt
 4 | .nitro
 5 | .cache
 6 | dist
 7 | 
 8 | # Node dependencies
 9 | node_modules
10 | 
11 | # Logs
12 | logs
13 | *.log
14 | 
15 | # Misc
16 | .DS_Store
17 | .fleet
18 | .idea
19 | 
20 | # Local env files
21 | .env
22 | .env.*
23 | !.env.example
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "build": "nuxt build",
 6 |     "dev": "nuxt dev",
 7 |     "generate": "nuxt generate",
 8 |     "preview": "nuxt preview",
 9 |     "postinstall": "nuxt prepare"
10 |   },
11 |   "devDependencies": {
12 |     "@iconify-json/tabler": "^1.1.77",
13 |     "@nuxt/devtools": "latest",
14 |     "@types/node": "^18.16.19",
15 |     "@types/tracking": "^1.1.30",
16 |     "@vant/nuxt": "^1.0.2",
17 |     "nuxt": "^3.6.3"
18 |   },
19 |   "dependencies": {
20 |     "@unocss/nuxt": "^0.53.5",
21 |     "@vueuse/core": "^10.2.1",
22 |     "@vueuse/nuxt": "^10.2.1",
23 |     "tracking": "^1.1.3",
24 |     "unocss": "^0.53.5",
25 |     "vant": "^4.6.2",
26 |     "vconsole": "^3.15.1"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container mx-auto">
 3 |     <div class="px-6">
 4 |       <div class="flex mt-8 items-center justify-center color-blue-600">
 5 |         <div class="i-tabler:face-id text-6xl"></div>
 6 |       </div>
 7 |       <div class="mt-8 mb-2 text-xl">您即将进行实名核身验证</div>
 8 |       <div class="text-sm mb-12">
 9 |         为了您顺利的通过认证，请先确认认证设备与环境满足以下条件：
10 |       </div>
11 |       <div class="flex flex-col space-y-8 mb-12 text-base">
12 |         <div class="flex items-center">
13 |           <div class="i-tabler:device-mobile-star mr-1 color-blue-600"></div>
14 |           手机屏幕亮度调制最大
15 |         </div>
16 |         <div class="flex items-center">
17 |           <div class="i-tabler:sun mr-1 color-blue-600"></div>
18 |           避免环境光过强或过暗
19 |         </div>
20 |         <div class="flex items-center">
21 |           <div class="i-tabler:user-circle mr-1 color-blue-600"></div>
22 |           正面对准手机拍摄
23 |         </div>
24 |       </div>
25 |       <van-button type="primary" block to="/face">开始识别</van-button>
26 |     </div>
27 |   </div>
28 | </template>
29 | 


--------------------------------------------------------------------------------
/pages/result.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const faceList = useState<string[]>("face-list", () => []);
 3 | </script>
 4 | <template>
 5 |   <div class="container mx-auto">
 6 |     <div class="box-border px-6">
 7 |       <van-empty>
 8 |         <div class="flex flex-col items-center space-y-2 justify-center">
 9 |           <div>验证成功</div>
10 |           <div class="text-sm color-stone">验证已通过，点击下一步继续操作</div>
11 |         </div>
12 |         <template #image>
13 |           <div
14 |             class="flex h-full text-9xl color-green items-center justify-center"
15 |           >
16 |             <div class="i-tabler:discount-check-filled"></div>
17 |           </div>
18 |         </template>
19 |       </van-empty>
20 |       <van-button type="primary" block to="/">下一步</van-button>
21 |       <div class="flex flex-wrap items-center justify-between my-8">
22 |         <div v-for="(item, index) in faceList" class="my-1" :key="item">
23 |           <van-image
24 |             width="100"
25 |             height="134"
26 |             fit="cover"
27 |             :src="item"
28 |             @click="showImagePreview(faceList, index)"
29 |           />
30 |         </div>
31 |       </div>
32 |     </div>
33 |   </div>
34 | </template>
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 微信 h5 人脸识别 Demo
 2 | 
 3 | 利用 [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia) 和 [tracking.js](https://trackingjs.com/) 实现调用摄像头并在页面内进行人脸识别
 4 | 
 5 | | 截图                                    |        |                                         |          |
 6 | | --------------------------------------- | ------ | --------------------------------------- | -------- |
 7 | | <img src="./assets/1.png" width="100"/> | 入口页 | <img src="./assets/2.jpg" width="100"/> | 授权弹窗 |
 8 | | <img src="./assets/3.png" width="100"/> | 识别中 | <img src="./assets/4.png" width="100"/> | 识别结果 |
 9 | 
10 | ## Demo
11 | 
12 | <img src="./assets/qrcode.png" width="100"/>
13 | 
14 | [https://facetest.kejun.me](https://facetest.kejun.me)
15 | 
16 | > 无服务器，不会收集你的信息，放心扫码测试
17 | ## 快速开始
18 | 
19 | ```bash
20 | pnpm install
21 | pnpm dev
22 | ```
23 | 
24 | 访问 http://localhost:3000
25 | 
26 | ## 框架和库
27 | 
28 | - Nuxt3
29 | - Vue3
30 | - VueUse
31 | - Vant
32 | - Unocss
33 | - tracking.js
34 | - VConsole
35 | 
36 | 核心代码在 [useFaceTrack.ts](./composables/useFaceTrack.ts) 中
37 | 
38 | ## 测试设备
39 | 
40 | 测试标准为能正确获取摄像头视频流，能使用 tracking 识别人脸，能在结果页展示人脸
41 | 
42 | 测试时，必须使用 **https** 协议或者 `127.0.0.1`
43 | 
44 | 作者条件有限，如果你也测试通过了，欢迎 PR 添加你的测试结果
45 | 
46 | - ✔️ 已通过
47 | - ❌ 未通过
48 | - ❓ 未测试
49 | 
50 | | 设备          | 微信     | QQ           | 企业微信        | 浏览器            |
51 | | ------------- | -------- | ------------ | --------------- | ----------------- |
52 | | iPhone 13 Pro | ✔️8.0.39 | ✔️8.9.58.612 | ✔️4.1.7(131309) | ✔️iOS 16.1 Safari |
53 | 


--------------------------------------------------------------------------------
/pages/face.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { init, tips, tracker, video } = useFaceTrack();
 3 | /**
 4 |  * 人脸结果
 5 |  */
 6 | const faceResultList = useState<string[]>("face-list", () => []);
 7 | faceResultList.value = [];
 8 | /**
 9 |  * 获取 9 个人头
10 |  */
11 | const maxResultCount = 9;
12 | /**
13 |  * 已经获取了的人脸数
14 |  */
15 | const currentResultCount = computed(() => faceResultList.value.length);
16 | /**
17 |  * 随便写的颜色
18 |  */
19 | const colors = ["bg-white", "bg-red", "bg-blue", "bg-yellow", "bg-green"];
20 | /**
21 |  * 模拟自动换颜色
22 |  */
23 | const currentColor = computed(
24 |   () => colors[currentResultCount.value % colors.length]
25 | );
26 | 
27 | /**
28 |  * 调用初始化
29 |  */
30 | init();
31 | 
32 | /**
33 |  * 节流使用 canvas 保存人脸
34 |  */
35 | const saveFace = useThrottleFn(() => {
36 |   const canvas = document.createElement("canvas");
37 |   canvas.width = document.body.clientWidth;
38 |   canvas.height = document.body.clientHeight;
39 |   const ctx = canvas.getContext("2d");
40 |   ctx?.drawImage(video.value!, 0, 0);
41 |   faceResultList.value.push(canvas.toDataURL("image/png", 0.3));
42 | }, 500);
43 | 
44 | /**
45 |  * 人脸数够了就停止并跳转到结果页
46 |  */
47 | watchEffect(() => {
48 |   if (faceResultList.value.length >= maxResultCount) {
49 |     stop();
50 |     navigateTo("/result", {
51 |       replace: true,
52 |     });
53 |   }
54 | });
55 | 
56 | onMounted(() => {
57 |   tracker.value?.on("track", (event) => {
58 |     // 检测到人脸就保存
59 |     if (event.data.length) {
60 |       saveFace();
61 |     }
62 |   });
63 | });
64 | </script>
65 | 
66 | <template>
67 |   <div
68 |     class="w-screen h-screen flex flex-col justify-center items-center space-y-8 box-border pb-30"
69 |     :class="currentColor"
70 |   >
71 |     <p class="text-xl px-6 text-center">{{ tips }}</p>
72 |     <div class="relative">
73 |       <video
74 |         ref="video"
75 |         muted
76 |         autoplay
77 |         webkit-playsinline
78 |         playsinline
79 |         x5-video-player-type="h5-page"
80 |         class="w-50 h-50 rounded-full object-cover rotate-y-180 bg-black"
81 |       />
82 |       <van-circle
83 |         :current-rate="(currentResultCount / maxResultCount) * 100"
84 |         layer-color="#eee"
85 |         :rate="maxResultCount"
86 |         class="w-50! h-50! absolute! left-0 top-0"
87 |       />
88 |     </div>
89 |   </div>
90 | </template>
91 | 


--------------------------------------------------------------------------------
/composables/useFaceTrack.ts:
--------------------------------------------------------------------------------
  1 | export enum TIPS {
  2 |   DEFAULT = "未检测到人脸, 请将正面对准手机",
  3 |   SCANING = "正在识别，请保持姿势不变",
  4 | }
  5 | 
  6 | function mediaErrorCaptured(error: any) {
  7 |   const nameMap = {
  8 |     AbortError: "操作中止",
  9 |     NotAllowedError: "打开设备权限不足，原因是用户拒绝了媒体访问请求",
 10 |     NotFoundError: "找不到满足条件的设备",
 11 |     NotReadableError:
 12 |       "系统上某个硬件、浏览器或网页层面发生的错误导致设备无法被访问",
 13 |     OverConstrainedError: "指定的要求无法被设备满足",
 14 |     SecurityError: "安全错误，使用设备媒体被禁止",
 15 |     TypeError: "类型错误",
 16 |     NotSupportedError: "不支持的操作",
 17 |     NetworkError: "网络错误发生",
 18 |     TimeoutError: "操作超时",
 19 |     UnknownError: "因未知的瞬态的原因使操作失败)",
 20 |     ConstraintError: "条件没满足而导致事件失败的异常操作",
 21 |   };
 22 |   const messageMap = {
 23 |     "permission denied": "麦克风、摄像头权限未开启，请检查后重试",
 24 |     "requested device not found": "未检测到摄像头",
 25 |     "could not start video source": "无法访问到摄像头",
 26 |   };
 27 | 
 28 |   let nameErrorMsg = nameMap[error.name as keyof typeof nameMap];
 29 |   if (!nameErrorMsg) {
 30 |     nameErrorMsg =
 31 |       messageMap[error.message.toLowerCase() as keyof typeof messageMap] ??
 32 |       "未知错误";
 33 |   }
 34 |   return nameErrorMsg;
 35 | }
 36 | 
 37 | export function useFaceTrack() {
 38 |   const video = ref<HTMLVideoElement>();
 39 |   const { stream, start, stop } = useUserCamera()
 40 |   const tips = ref<string>(TIPS.DEFAULT);
 41 |   const tracker = shallowRef<tracking.ObjectTracker>();
 42 |   function initTracker() {
 43 |     tracker.value = new tracking.ObjectTracker("face");
 44 |     tracker.value.setInitialScale(4);
 45 |     tracker.value.setStepSize(2);
 46 |     tracker.value.setEdgesDensity(0.1);
 47 |     tracking.track(video.value!, tracker.value);
 48 |     tracker.value.on("track", (event) => {
 49 |       if (event.data.length) {
 50 |         tips.value = TIPS.SCANING;
 51 |       } else {
 52 |         tips.value = TIPS.DEFAULT;
 53 |       }
 54 |     });
 55 |   }
 56 | 
 57 |   async function init() {
 58 |     try {
 59 |       await start();
 60 |     } catch (error) {
 61 |       tips.value = mediaErrorCaptured(error);
 62 |     }
 63 |   }
 64 | 
 65 |   async function tryPlay() {
 66 |     try {
 67 |       await video.value?.play();
 68 |     } catch (error) {}
 69 |   }
 70 | 
 71 |   watchEffect(() => {
 72 |     if (video.value) {
 73 |       video.value.srcObject = stream.value!;
 74 |       nextTick(async () => {
 75 |         await tryPlay();
 76 |         video.value?.addEventListener(
 77 |           "loadeddata",
 78 |           async () => {
 79 |             await tryPlay();
 80 |           },
 81 |           {
 82 |             once: true,
 83 |           }
 84 |         );
 85 |       });
 86 |     }
 87 |   });
 88 | 
 89 |   onMounted(initTracker.bind(window));
 90 |   onUnmounted(() => {
 91 |     tracker.value?.removeAllListeners();
 92 |     stop();
 93 |   });
 94 | 
 95 |   return {
 96 |     video,
 97 |     stream,
 98 |     tips,
 99 |     init,
100 |     tracker,
101 |   };
102 | }
103 | 


--------------------------------------------------------------------------------