{"id":103543,"date":"2026-09-10T21:33:03","date_gmt":"2026-09-10T13:33:03","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/103543.html"},"modified":"2026-09-10T21:33:03","modified_gmt":"2026-09-10T13:33:03","slug":"%e7%ab%af%e4%be%a7%e6%8e%a8%e7%90%86%e5%ae%9e%e6%88%98%ef%bc%9aface-api-js-%e9%9b%b6%e5%90%8e%e7%ab%af%e4%ba%ba%e8%84%b8%e8%af%86%e5%88%ab%e8%b8%a9%e5%9d%91%e8%ae%b0","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/103543.html","title":{"rendered":"\u7aef\u4fa7\u63a8\u7406\u5b9e\u6218\uff1aface-api.js \u96f6\u540e\u7aef\u4eba\u8138\u8bc6\u522b\u8e29\u5751\u8bb0"},"content":{"rendered":"

\u7aef\u4fa7\u63a8\u7406\u4eba\u5de5\u667a\u80fdTensorFlow.js\u4eba\u8138\u8bc6\u522b\u524d\u7aef# \u7aef\u4fa7\u63a8\u7406\u5b9e\u6218：face-api.js \u96f6\u540e\u7aef\u4eba\u8138\u8bc6\u522b\u8e29\u5751\u8bb0<\/p>\n

\u4e00\u4e2a\u7eaf\u524d\u7aef\u7684\u4eba\u8138\u8bc6\u522b Demo：\u7167\u7247\u4e0d\u4e0a\u4f20\u3001\u4e0d\u8d70\u4efb\u4f55\u540e\u7aef\u63a5\u53e3\u3001\u65ad\u7f51\u4e5f\u80fd\u8dd1\u3002\u6574\u5957\u6a21\u578b 6.7MB，\u6d4f\u89c8\u5668\u91cc WebGL \u52a0\u901f，\u5b9e\u65f6\u6444\u50cf\u5934\u6a21\u5f0f\u80fd\u7a33\u5b9a\u51fa FPS\u3002\u8fd9\u7bc7\u6587\u7ae0\u628a\u300c\u68c0\u6d4b \u2192 \u5173\u952e\u70b9 \u2192 128 \u7ef4\u7279\u5f81 \u2192 \u672c\u5730\u6bd4\u5bf9\u300d\u8fd9\u6761\u94fe\u8def\u4ece\u6e90\u7801\u5c42\u9762\u62c6\u5f00，\u518d\u628a\u6211\u8e29\u8fc7\u7684 6 \u4e2a\u5751\u539f\u6837\u5949\u4e0a\u3002<\/p>\n

\n

\u4e00\u3001\u5148\u770b\u7ed3\u679c：\u5b83\u5230\u5e95\u80fd\u505a\u5230\u4ec0\u4e48<\/h3>\n

\u5f88\u591a\u4eba\u4e00\u542c"\u524d\u7aef\u4eba\u8138\u8bc6\u522b"\u5c31\u89c9\u5f97\u662f\u73a9\u5177\u3002\u5148\u628a\u6211\u8fd9\u5957\u4e1c\u897f\u7684\u80fd\u529b\u8fb9\u754c\u6446\u51fa\u6765，\u907f\u514d\u4f60\u8bfb\u5b8c\u4e86\u53d1\u73b0\u4e0d\u662f\u81ea\u5df1\u8981\u7684：<\/p>\n\n\u80fd\u529b\u5b9e\u73b0\u65b9\u5f0f\u662f\u5426\u8d70\u7f51\u7edc<\/tr>\n\n\n\n\n\n\n\n\n
\u7167\u7247\u4eba\u8138\u68c0\u6d4b<\/td>\nTinyFaceDetector，inputSize 416<\/td>\n\u5426<\/td>\n<\/tr>\n
68 \u4e2a\u5173\u952e\u70b9\u5b9a\u4f4d<\/td>\nfaceLandmark68Net<\/td>\n\u5426<\/td>\n<\/tr>\n
128 \u7ef4\u4eba\u8138\u7279\u5f81\u63d0\u53d6<\/td>\nfaceRecognitionNet<\/td>\n\u5426<\/td>\n<\/tr>\n
\u4eba\u8138\u5e93\u5b58\u50a8<\/td>\nIndexedDB（Dexie），\u5b58 128 \u7ef4\u5411\u91cf<\/td>\n\u5426<\/td>\n<\/tr>\n
1:N \u6bd4\u5bf9\u8bc6\u522b<\/td>\n\u6b27\u6c0f\u8ddd\u79bb + \u9608\u503c 0.55<\/td>\n\u5426<\/td>\n<\/tr>\n
\u6444\u50cf\u5934\u5b9e\u65f6\u8bc6\u522b<\/td>\n300ms \u4e00\u6b21\u68c0\u6d4b，inputSize 320<\/td>\n\u5426<\/td>\n<\/tr>\n
\u6293\u62cd\u5165\u5e93<\/td>\ncanvas \u622a\u56fe \u2192 \u7f29\u7565\u56fe \u2192 \u5165\u5e93<\/td>\n\u5426<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u4e00\u53e5\u8bdd\u603b\u7ed3：\u9664\u4e86\u9996\u6b21\u52a0\u8f7d\u6a21\u578b\u6743\u91cd\u9700\u8981 HTTP \u8bf7\u6c42，\u4e4b\u540e\u6240\u6709\u8ba1\u7b97\u548c\u6570\u636e\u90fd\u5728\u6d4f\u89c8\u5668\u91cc\u3002\u5237\u65b0\u3001\u65ad\u7f51\u3001\u5173\u6389\u540e\u7aef\u670d\u52a1，\u7167\u6837\u8bc6\u522b\u3002<\/p>\n

\u8fd9\u5957\u4e1c\u897f\u9002\u5408\u7684\u573a\u666f\u5f88\u660e\u786e：<\/p>\n

  • \u5185\u90e8\u8003\u52e4\u3001\u95e8\u7981\u8fd9\u7c7b\u53d7\u63a7\u73af\u5883\u7684\u8eab\u4efd\u6821\u9a8c；<\/li>\n
  • \u76f8\u518c\/\u56fe\u5e93\u7684\u672c\u5730\u4eba\u8138\u805a\u7c7b；<\/li>\n
  • \u4f5c\u4e3a\u9690\u79c1\u654f\u611f\u573a\u666f\u7684\u66ff\u4ee3\u65b9\u6848\u2014\u2014\u751f\u7269\u7279\u5f81\u6839\u672c\u4e0d\u51fa\u8bbe\u5907\u3002<\/li>\n

    \u4e0d\u9002\u5408\u7684\u573a\u666f\u4e5f\u8bf4\u6e05\u695a：\u91d1\u878d\u7ea7 1:1 \u6838\u8eab\u3001\u9632\u4f2a\u6d3b\u4f53\u653b\u51fb\u3001\u5927\u89c4\u6a21\u4e07\u4eba\u5e95\u5e93\u68c0\u7d22\u3002\u8f7b\u91cf\u7ea7\u6a21\u578b + \u6d4f\u89c8\u5668\u7b97\u529b，\u6491\u4e0d\u8d77\u8fd9\u4e9b\u3002<\/p>\n

    \n

    \u4e8c\u3001\u6280\u672f\u9009\u578b：\u4e3a\u4ec0\u4e48\u662f face-api.js<\/h3>\n

    \u9009\u578b\u65f6\u6211\u5bf9\u6bd4\u4e86\u56db\u6761\u8def\u7ebf，\u6700\u7ec8\u9009\u4e86 face-api.js，\u7406\u7531\u548c\u4ee3\u4ef7\u90fd\u5199\u5728\u8868\u91cc：<\/p>\n\n\u65b9\u6848\u6a21\u578b\u4f53\u79ef\u6d4f\u89c8\u5668\u7b97\u529b\u4e0a\u624b\u6210\u672c\u6211\u7684\u5224\u65ad<\/tr>\n\n\n\n\n\n
    face-api.js（TF.js）<\/td>\n\u7ea6 6.7MB<\/td>\nWebGL \u81ea\u52a8\u52a0\u901f<\/td>\n\u4f4e，API \u94fe\u5f0f\u8c03\u7528<\/td>\n\u2705 \u9009\u4e2d：\u751f\u6001\u6210\u719f\u3001\u79bb\u7ebf\u53ef\u7528<\/td>\n<\/tr>\n
    \u4e91\u7aef SDK（\u767e\u5ea6\/\u963f\u91cc）<\/td>\n0<\/td>\n\u670d\u52a1\u7aef<\/td>\n\u4f4e<\/td>\n\u274c \u6570\u636e\u51fa\u8bbe\u5907\u3001\u6309\u91cf\u8ba1\u8d39<\/td>\n<\/tr>\n
    MediaPipe Face Mesh<\/td>\n\u7ea6 3MB<\/td>\nWASM + GPU<\/td>\n\u4e2d，\u9700\u8981\u81ea\u5df1\u63a5\u8bc6\u522b<\/td>\n\u26a0\ufe0f \u68c0\u6d4b\u5f3a，\u4f46\u4e0d\u81ea\u5e26\u6bd4\u5bf9<\/td>\n<\/tr>\n
    Transformers.js v4<\/td>\n\u89c6\u6a21\u578b\u800c\u5b9a<\/td>\nWebGPU<\/td>\n\u4e2d\u9ad8<\/td>\n\u26a0\ufe0f 2026 \u5e74\u5f88\u706b，\u4f46\u4eba\u8138\u8bc6\u522b\u4e0d\u662f\u5b83\u7684\u5f3a\u9879<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u6280\u672f\u6808\u6700\u7ec8\u5b9a\u4e0b\u6765：<\/p>\n

    {<\/span>
    \n "vue"<\/span>:<\/span> "^3.4.21"<\/span>,<\/span>
    \n "face-api.js"<\/span>:<\/span> "^0.22.2"<\/span>,<\/span>
    \n "dexie"<\/span>:<\/span> "^4.0.7"<\/span>,<\/span>
    \n "vite"<\/span>:<\/span> "^5.2.8"<\/span>
    \n}<\/span><\/p>\n

    dexie \u662f\u5173\u952e\u4e00\u73af\u2014\u2014\u4eba\u8138\u7279\u5f81\u5411\u91cf\u8981\u957f\u671f\u7559\u5b58，localStorage \u90a3 5MB \u548c\u53ea\u80fd\u5b58\u5b57\u7b26\u4e32\u7684\u9650\u5236\u6839\u672c\u4e0d\u591f\u7528，\u5fc5\u987b\u4e0a IndexedDB\u3002<\/p>\n

    \n

    \u4e09\u3001\u6838\u5fc3\u539f\u7406：128 \u7ef4\u5411\u91cf + \u6b27\u6c0f\u8ddd\u79bb<\/h3>\n

    \u6574\u6761\u94fe\u8def\u5176\u5b9e\u5c31\u56db\u6b65，\u7406\u89e3\u4e86\u8fd9\u56db\u6b65，\u4ee3\u7801\u5c31\u5168\u901a\u4e86：<\/p>\n

    \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
    \n\u2502 \u8f93\u5165\u56fe\u50cf \u2502 \u2192 \u2502 \u4eba\u8138\u68c0\u6d4b \u2502 \u2192 \u2502 68 \u5173\u952e\u70b9\u5bf9\u9f50 \u2502 \u2192 \u2502 \u7279\u5f81\u63d0\u53d6 \u2502
    \n\u2502 img\/video \u2502 \u2502 TinyFaceDet. \u2502 \u2502 Landmark68 \u2502 \u2502 Recognition \u2502
    \n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2518
    \n \u2502
    \n Float32Array(128)
    \n \u2502
    \n \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u25bc\u2500\u2500\u2500\u2500\u2500\u2500\u2510
    \n \u2502 \u4e0e IndexedDB \u4eba\u8138\u5e93\u9010\u6761\u7b97\u6b27\u6c0f\u8ddd\u79bb \u2502
    \n \u2502 dist < 0.55 \u2192 \u5224\u5b9a\u4e3a\u540c\u4e00\u4e2a\u4eba \u2502
    \n \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/p>\n

    \u4e3a\u4ec0\u4e48\u5173\u952e\u70b9\u5bf9\u9f50\u8fd9\u4e00\u6b65\u4e0d\u80fd\u7701？ \u56e0\u4e3a\u7279\u5f81\u63d0\u53d6\u7f51\u7edc（ResNet-34 \u53d8\u4f53）\u5bf9\u4eba\u8138\u7684\u59ff\u6001\u5f88\u654f\u611f\u3002\u4fa7\u7740\u8138\u548c\u6b63\u8138\u76f4\u63a5\u62bd\u7279\u5f81，\u540c\u4e00\u4e2a\u4eba\u7684\u5411\u91cf\u8ddd\u79bb\u4f1a\u62c9\u5f97\u5f88\u5f00\u3002Landmark \u7f51\u7edc\u5148\u5b9a\u4f4d 68 \u4e2a\u70b9，\u518d\u505a\u4eff\u5c04\u53d8\u6362\u628a\u4eba\u8138"\u6446\u6b63"，\u540e\u7eed\u7279\u5f81\u7684\u7a33\u5b9a\u6027\u624d\u6709\u4fdd\u969c\u3002<\/p>\n

    \u4e3a\u4ec0\u4e48\u7528\u6b27\u6c0f\u8ddd\u79bb\u800c\u4e0d\u662f\u4f59\u5f26\u76f8\u4f3c\u5ea6？ face-api.js \u7684 Recognition \u7f51\u7edc\u8f93\u51fa\u7684\u662f\u7ecf\u8fc7 L2 \u5f52\u4e00\u5316\u7684 128 \u7ef4\u5411\u91cf，\u5728\u8fd9\u4e2a\u524d\u63d0\u4e0b\u6b27\u6c0f\u8ddd\u79bb\u548c\u4f59\u5f26\u76f8\u4f3c\u5ea6\u662f\u5355\u8c03\u7b49\u4ef7\u7684，\u800c\u6b27\u6c0f\u8ddd\u79bb\u8ba1\u7b97\u66f4\u7701\u4e8b，\u5c11\u4e00\u6b21\u70b9\u79ef\u548c\u6a21\u957f\u8fd0\u7b97\u3002<\/p>\n

    128 \u7ef4\u8fd9\u4e2a\u6570\u5b57\u662f\u600e\u4e48\u6765\u7684？ \u5b83\u4e0d\u662f\u968f\u4fbf\u5b9a\u7684，\u800c\u662f\u7f51\u7edc\u6700\u540e\u4e00\u5c42\u5168\u8fde\u63a5\u7684\u8f93\u51fa\u7ef4\u5ea6\u3002\u4f60\u53ef\u4ee5\u628a\u5b83\u7406\u89e3\u6210：\u6a21\u578b\u628a\u4e00\u5f20\u8138\u538b\u7f29\u6210\u4e86\u4e00\u4e2a 128 \u957f\u5ea6\u7684"\u6570\u5b57\u6307\u7eb9"\u3002\u7ef4\u5ea6\u8d8a\u9ad8\u533a\u5206\u5ea6\u8d8a\u597d，\u4f46\u5b58\u50a8\u548c\u6bd4\u5bf9\u6210\u672c\u4e5f\u7ebf\u6027\u4e0a\u5347\u2014\u2014128 \u7ef4\u5728\u8fd9\u4e2a\u91cf\u7ea7\u4e0a\u662f\u4e2a\u5e73\u8861\u70b9，\u4e00\u6761\u7279\u5f81\u5b58\u6210\u666e\u901a\u6570\u7ec4\u4e5f\u5c31\u51e0 KB\u3002<\/p>\n

    \u4e3a\u4ec0\u4e48\u6bd4\u5bf9\u4e0d\u7528\u540e\u7aef\u5411\u91cf\u6570\u636e\u5e93？ \u56e0\u4e3a\u5e95\u5e93\u5c0f\u3002\u51e0\u5341\u5230\u51e0\u767e\u6761\u7279\u5f81，JS \u91cc\u4e00\u4e2a for \u5faa\u73af\u9010\u6761\u7b97\u8ddd\u79bb，\u8017\u65f6\u5728\u6beb\u79d2\u7ea7，\u5f15\u5165\u5411\u91cf\u5e93\u5c5e\u4e8e\u8fc7\u5ea6\u8bbe\u8ba1\u3002\u771f\u5230\u4e86\u4e07\u4eba\u7ea7\u522b，\u624d\u9700\u8981\u8003\u8651 HNSW \u4e4b\u7c7b\u7684\u8fd1\u4f3c\u68c0\u7d22\u65b9\u6848\u3002<\/p>\n

    \u68c0\u6d4b\u5668\u7684\u4e24\u4e2a\u53c2\u6570\u600e\u4e48\u7406\u89e3？ inputSize \u51b3\u5b9a\u56fe\u50cf\u88ab\u7f29\u653e\u5230\u7684\u5c3a\u5bf8，\u503c\u8d8a\u5927\u8d8a\u80fd\u68c0\u51fa\u5c0f\u8138，\u4f46\u8ba1\u7b97\u91cf\u8fd1\u4f3c\u6309\u5e73\u65b9\u589e\u957f；scoreThreshold \u662f\u7f6e\u4fe1\u5ea6\u95e8\u69db，\u8c03\u9ad8\u80fd\u8fc7\u6ee4\u6389\u8bef\u68c0\u6846，\u4ee3\u4ef7\u662f\u6f0f\u68c0\u4fa7\u8138\u548c\u6a21\u7cca\u4eba\u8138\u3002\u8fd9\u4e24\u4e2a\u53c2\u6570\u6ca1\u6709\u6807\u51c6\u7b54\u6848，\u53ea\u80fd\u7ed3\u5408\u573a\u666f\u5b9e\u6d4b\u3002<\/p>\n

    \n

    \u56db\u3001\u5173\u952e\u4ee3\u7801\u62c6\u89e3<\/h3>\n

    4.1 \u6a21\u578b\u52a0\u8f7d：\u5355\u4f8b + \u8fdb\u5ea6\u56de\u8c03<\/h4>\n

    \u6a21\u578b 6.7MB，\u7edd\u5bf9\u4e0d\u80fd\u91cd\u590d\u52a0\u8f7d\u3002\u8fd9\u91cc\u7528\u4e00\u4e2a\u6a21\u5757\u7ea7\u53d8\u91cf\u505a\u5355\u4f8b，\u540c\u65f6\u628a\u52a0\u8f7d\u4e2d\u7684 Promise \u7f13\u5b58\u4e0b\u6765，\u9632\u6b62\u5e76\u53d1\u8c03\u7528\u89e6\u53d1\u591a\u6b21\u8bf7\u6c42：<\/p>\n

    \/\/ src\/utils\/faceApi.js<\/span>
    \nimport<\/span> *<\/span> as<\/span> faceapi from<\/span> 'face-api.js'<\/span><\/p>\n

    \/\/ \u7528\u76f8\u5bf9\u8def\u5f84，\u907f\u514d GitHub Pages \u5b50\u8def\u5f84\u90e8\u7f72\u65f6\u4e22\u524d\u7f00<\/span>
    \nconst<\/span> MODEL_URL<\/span> =<\/span> 'models'<\/span>
    \nconst<\/span> DISTANCE_THRESHOLD<\/span> =<\/span> 0.55<\/span> \/\/ \u8d8a\u5c0f\u8d8a\u4e25\u683c，0.55 \u662f\u7ecf\u9a8c\u503c<\/span>
    \nlet<\/span> loaded =<\/span> false<\/span>
    \nlet<\/span> loading =<\/span> null<\/span><\/p>\n

    export<\/span> async<\/span> function<\/span> loadModels<\/span>(<\/span>onProgress<\/span>)<\/span> {<\/span>
    \n if<\/span> (<\/span>loaded)<\/span> return<\/span>
    \n if<\/span> (<\/span>loading)<\/span> return<\/span> loading \/\/ \u5173\u952e：\u5e76\u53d1\u8c03\u7528\u590d\u7528\u540c\u4e00\u4e2a Promise<\/span><\/p>\n

    loading =<\/span> (<\/span>async<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
    \n await<\/span> faceapi.<\/span>nets.<\/span>tinyFaceDetector.<\/span>loadFromUri<\/span>(<\/span>MODEL_URL<\/span>)<\/span>
    \n onProgress?.<\/span>(<\/span>{<\/span> name<\/span>:<\/span> '\u4eba\u8138\u68c0\u6d4b\u5668'<\/span>,<\/span> done<\/span>:<\/span> true<\/span> }<\/span>)<\/span><\/p>\n

    await<\/span> faceapi.<\/span>nets.<\/span>faceLandmark68Net.<\/span>loadFromUri<\/span>(<\/span>MODEL_URL<\/span>)<\/span>
    \n onProgress?.<\/span>(<\/span>{<\/span> name<\/span>:<\/span> '\u5173\u952e\u70b9\u5b9a\u4f4d'<\/span>,<\/span> done<\/span>:<\/span> true<\/span> }<\/span>)<\/span><\/p>\n

    await<\/span> faceapi.<\/span>nets.<\/span>faceRecognitionNet.<\/span>loadFromUri<\/span>(<\/span>MODEL_URL<\/span>)<\/span>
    \n onProgress?.<\/span>(<\/span>{<\/span> name<\/span>:<\/span> '\u7279\u5f81\u63d0\u53d6'<\/span>,<\/span> done<\/span>:<\/span> true<\/span> }<\/span>)<\/span><\/p>\n

    loaded =<\/span> true<\/span>
    \n }<\/span>)<\/span>(<\/span>)<\/span><\/p>\n

    return<\/span> loading
    \n}<\/span><\/p>\n

    \u4e09\u4e2a\u6a21\u578b\u7684\u771f\u5b9e\u4f53\u79ef（\u6765\u81ea public\/models\/）：<\/p>\n

      \n
    • tiny_face_detector_model：189 KB<\/li>\n
    • face_landmark_68_model：348 KB<\/li>\n
    • face_recognition_model（2 \u4e2a shard）：6.15 MB<\/li>\n<\/ul>\n

      \u5927\u5934\u5168\u5728\u7279\u5f81\u63d0\u53d6\u7f51\u7edc\u4e0a，\u8fd9\u4e5f\u662f\u7aef\u4fa7\u63a8\u7406\u7684\u5178\u578b\u5c40\u9762：\u68c0\u6d4b\u5668\u5f88\u4fbf\u5b9c，\u8bc6\u522b\u7f51\u7edc\u5f88\u8d35\u3002<\/p>\n

      4.2 \u68c0\u6d4b：\u94fe\u5f0f API \u4e00\u6b21\u62ff\u9f50<\/h4>\n

      export<\/span> async<\/span> function<\/span> detectFaces<\/span>(<\/span>input<\/span>)<\/span> {<\/span>
      \n const<\/span> detectorOptions =<\/span> new<\/span> faceapi.<\/span>TinyFaceDetectorOptions<\/span>(<\/span>{<\/span>
      \n inputSize<\/span>:<\/span> 416<\/span>,<\/span> \/\/ \u8f93\u5165\u5c3a\u5bf8\u8d8a\u5927\u8d8a\u51c6，\u4f46\u8017\u65f6\u8fd1\u4f3c\u5e73\u65b9\u589e\u957f<\/span>
      \n scoreThreshold<\/span>:<\/span> 0.45<\/span> \/\/ \u7f6e\u4fe1\u5ea6\u8fc7\u6ee4，\u592a\u4f4e\u4f1a\u51fa\u73b0\u5927\u91cf\u8bef\u68c0\u6846<\/span>
      \n }<\/span>)<\/span><\/p>\n

      \/\/ \u4e00\u6b21\u62ff\u9f50\u68c0\u6d4b + \u5173\u952e\u70b9 + \u63cf\u8ff0\u5b50<\/span>
      \n const<\/span> results =<\/span> await<\/span> faceapi
      \n .<\/span>detectAllFaces<\/span>(<\/span>input,<\/span> detectorOptions)<\/span>
      \n .<\/span>withFaceLandmarks<\/span>(<\/span>)<\/span>
      \n .<\/span>withFaceDescriptors<\/span>(<\/span>)<\/span><\/p>\n

      return<\/span> results.<\/span>map<\/span>(<\/span>(<\/span>r<\/span>)<\/span> =><\/span> (<\/span>{<\/span>
      \n box<\/span>:<\/span> r.<\/span>detection.<\/span>box,<\/span>
      \n score<\/span>:<\/span> r.<\/span>detection.<\/span>score,<\/span>
      \n landmarks<\/span>:<\/span> r.<\/span>landmarks,<\/span>
      \n descriptor<\/span>:<\/span> r.<\/span>descriptor \/\/ Float32Array(128)<\/span>
      \n }<\/span>)<\/span>)<\/span>
      \n}<\/span><\/p>\n

      \u6ce8\u610f inputSize \u8fd9\u4e2a\u53c2\u6570，\u5b83\u662f\u7aef\u4fa7\u63a8\u7406\u6027\u80fd\u8c03\u4f18\u7684\u7b2c\u4e00\u65cb\u94ae：416 \u80fd\u4fdd\u8bc1\u5c0f\u8138\u3001\u4fa7\u8138\u7684\u53ec\u56de；\u4f46\u5982\u679c\u4f60\u8981\u8dd1\u5b9e\u65f6\u89c6\u9891\u6d41，\u5f97\u5f80\u4e0b\u538b\u3002<\/p>\n

      4.3 \u6bd4\u5bf9：\u6b27\u6c0f\u8ddd\u79bb + \u9608\u503c\u5224\u5b9a<\/h4>\n

      export<\/span> function<\/span> euclideanDistance<\/span>(<\/span>a,<\/span> b<\/span>)<\/span> {<\/span>
      \n if<\/span> (<\/span>!<\/span>a ||<\/span> !<\/span>b)<\/span> return<\/span> Infinity<\/span>
      \n let<\/span> sum =<\/span> 0<\/span>
      \n for<\/span> (<\/span>let<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> a.<\/span>length;<\/span> i++<\/span>)<\/span> {<\/span>
      \n const<\/span> d =<\/span> a[<\/span>i]<\/span> –<\/span> b[<\/span>i]<\/span>
      \n sum +=<\/span> d *<\/span> d
      \n }<\/span>
      \n return<\/span> Math.<\/span>sqrt<\/span>(<\/span>sum)<\/span>
      \n}<\/span><\/p>\n

      export<\/span> function<\/span> findBestMatch<\/span>(<\/span>queryDescriptor,<\/span> library<\/span>)<\/span> {<\/span>
      \n if<\/span> (<\/span>!<\/span>queryDescriptor ||<\/span> !<\/span>library?.<\/span>length)<\/span> return<\/span> null<\/span><\/p>\n

      let<\/span> best =<\/span> null<\/span>
      \n for<\/span> (<\/span>const<\/span> item of<\/span> library)<\/span> {<\/span>
      \n if<\/span> (<\/span>!<\/span>item.<\/span>descriptor)<\/span> continue<\/span>
      \n const<\/span> dist =<\/span> euclideanDistance<\/span>(<\/span>queryDescriptor,<\/span> item.<\/span>descriptor)<\/span>
      \n if<\/span> (<\/span>!<\/span>best ||<\/span> dist <<\/span> best.<\/span>distance)<\/span> {<\/span>
      \n best =<\/span> {<\/span>
      \n id<\/span>:<\/span> item.<\/span>id,<\/span>
      \n name<\/span>:<\/span> item.<\/span>name,<\/span>
      \n distance<\/span>:<\/span> dist,<\/span>
      \n similarity<\/span>:<\/span> Math.<\/span>max<\/span>(<\/span>0<\/span>,<\/span> 1<\/span> –<\/span> dist)<\/span> \/\/ 0~1 \u76f8\u4f3c\u5ea6，\u5939\u4f4f\u8d1f\u503c<\/span>
      \n }<\/span>
      \n }<\/span>
      \n }<\/span>
      \n return<\/span> best
      \n}<\/span><\/p>\n

      export<\/span> function<\/span> isPass<\/span>(<\/span>threshold =<\/span> DISTANCE_THRESHOLD<\/span><\/span>)<\/span> {<\/span>
      \n return<\/span> (<\/span>match<\/span>)<\/span> =><\/span> match &&<\/span> match.<\/span>distance <<\/span> threshold
      \n}<\/span><\/p>\n

      Math.max(0, 1 – dist) \u8fd9\u884c\u4e0d\u662f\u591a\u4f59\u7684：\u8ddd\u79bb\u5927\u4e8e 1 \u65f6\u76f8\u4f3c\u5ea6\u4f1a\u53d8\u6210\u8d1f\u6570，\u76f4\u63a5\u5c55\u793a\u7ed9\u7528\u6237\u4f1a\u51fa\u73b0"-12.3%"\u8fd9\u79cd\u9b3c\u4e1c\u897f\u3002<\/p>\n

      4.4 \u4eba\u8138\u5e93：IndexedDB \u5b58 128 \u7ef4\u5411\u91cf<\/h4>\n

      \/\/ src\/utils\/db.js<\/span>
      \nimport<\/span> Dexie from<\/span> 'dexie'<\/span><\/p>\n

      class<\/span> FaceDB<\/span> extends<\/span> Dexie<\/span> {<\/span>
      \n constructor<\/span>(<\/span>)<\/span> {<\/span>
      \n super<\/span>(<\/span>'FaceAILibrary'<\/span>)<\/span>
      \n this<\/span>.<\/span>version<\/span>(<\/span>1<\/span>)<\/span>.<\/span>stores<\/span>(<\/span>{<\/span>
      \n faces<\/span>:<\/span> '++id, name, createdAt'<\/span> \/\/ \u81ea\u589e\u4e3b\u952e + name\/createdAt \u7d22\u5f15<\/span>
      \n }<\/span>)<\/span>
      \n }<\/span>
      \n}<\/span><\/p>\n

      export<\/span> async<\/span> function<\/span> addFace<\/span>(<\/span>{<\/span> name,<\/span> descriptor,<\/span> thumbnail }<\/span><\/span>)<\/span> {<\/span>
      \n const<\/span> id =<\/span> await<\/span> db.<\/span>faces.<\/span>add<\/span>(<\/span>{<\/span>
      \n name<\/span>:<\/span> name ||<\/span> '\u672a\u547d\u540d'<\/span>,<\/span>
      \n descriptor<\/span>:<\/span> Array.<\/span>from<\/span>(<\/span>descriptor)<\/span>,<\/span> \/\/ Float32Array \u2192 \u666e\u901a\u6570\u7ec4<\/span>
      \n thumbnail,<\/span>
      \n createdAt<\/span>:<\/span> Date.<\/span>now<\/span>(<\/span>)<\/span>
      \n }<\/span>)<\/span>
      \n return<\/span> id
      \n}<\/span><\/p>\n

      Array.from(descriptor) \u8fd9\u884c\u770b\u7740\u4e0d\u8d77\u773c，\u662f\u8e29\u8fc7\u5751\u624d\u77e5\u9053\u5fc5\u987b\u5199\u2014\u2014\u4e0b\u9762\u7b2c\u516d\u8282\u8be6\u7ec6\u8bf4\u3002<\/p>\n

      4.5 \u5b9e\u65f6\u6444\u50cf\u5934：\u964d\u9891 + \u964d\u5c3a\u5bf8 + \u5355\u4eba\u68c0\u6d4b<\/h4>\n

      \u5b9e\u65f6\u6a21\u5f0f\u4e0d\u80fd\u6bcf\u5e27\u90fd\u8dd1，\u6211\u7528\u4e86\u4e09\u91cd\u8282\u6d41：<\/p>\n

      const<\/span> DETECT_INTERVAL<\/span> =<\/span> 300<\/span> \/\/ ms：\u6bcf 300ms \u68c0\u6d4b\u4e00\u6b21，\u800c\u4e0d\u662f\u6bcf\u5e27<\/span>
      \nconst<\/span> DETECT_INPUT_SIZE<\/span> =<\/span> 320<\/span> \/\/ \u6bd4\u5355\u56fe\u6a21\u5f0f\u7684 416 \u5c0f，\u5b9e\u65f6\u66f4\u6d41\u7545<\/span><\/p>\n

      async<\/span> function<\/span> detectFromCamera<\/span>(<\/span>)<\/span> {<\/span>
      \n const<\/span> v =<\/span> videoEl.<\/span>value
      \n if<\/span> (<\/span>!<\/span>v ||<\/span> !<\/span>streaming.<\/span>value)<\/span> return<\/span>
      \n if<\/span> (<\/span>v.<\/span>readyState <<\/span> 2<\/span>)<\/span> return<\/span> \/\/ \u89c6\u9891\u5143\u6570\u636e\u8fd8\u6ca1\u52a0\u8f7d\u5b8c，\u8df3\u8fc7\u8fd9\u4e00\u8f6e<\/span><\/p>\n

      frameCount++<\/span><\/p>\n

      try<\/span> {<\/span>
      \n const<\/span> detector =<\/span> new<\/span> faceapi.<\/span>TinyFaceDetectorOptions<\/span>(<\/span>{<\/span>
      \n inputSize<\/span>:<\/span> DETECT_INPUT_SIZE<\/span>,<\/span>
      \n scoreThreshold<\/span>:<\/span> 0.5<\/span>
      \n }<\/span>)<\/span>
      \n \/\/ \u5b9e\u65f6\u6a21\u5f0f\u53ea\u68c0\u4e00\u5f20\u8138，\u7701\u6389\u591a\u8138\u6392\u5e8f\u7684\u5f00\u9500<\/span>
      \n const<\/span> result =<\/span> await<\/span> faceapi.<\/span>detectSingleFace<\/span>(<\/span>v,<\/span> detector)<\/span>
      \n .<\/span>withFaceLandmarks<\/span>(<\/span>)<\/span>
      \n .<\/span>withFaceDescriptor<\/span>(<\/span>)<\/span><\/p>\n

      if<\/span> (<\/span>result)<\/span> {<\/span>
      \n const<\/span> library =<\/span> await<\/span> listFaces<\/span>(<\/span>)<\/span>
      \n const<\/span> m =<\/span> findBestMatch<\/span>(<\/span>result.<\/span>descriptor,<\/span> library)<\/span>
      \n lastMatch.<\/span>value =<\/span> m ?<\/span> {<\/span> …<\/span>m,<\/span> pass<\/span>:<\/span> isPass<\/span>(<\/span>threshold)<\/span>(<\/span>m)<\/span> }<\/span> :<\/span> null<\/span>
      \n }<\/span>
      \n }<\/span> catch<\/span> (<\/span>err)<\/span> {<\/span>
      \n console.<\/span>warn<\/span>(<\/span>'\u68c0\u6d4b\u5f02\u5e38'<\/span>,<\/span> err)<\/span> \/\/ \u5355\u5e27\u5931\u8d25\u4e0d\u80fd\u8ba9\u6574\u4e2a\u5faa\u73af\u5d29\u6389<\/span>
      \n }<\/span>
      \n}<\/span><\/p>\n

      \u4e09\u4e2a\u5173\u952e\u70b9：\u7528 setInterval \u800c\u975e requestAnimationFrame（\u53ef\u63a7\u9891\u7387）\u3001readyState < 2 \u76f4\u63a5\u8fd4\u56de（\u907f\u514d\u9ed1\u5c4f\u671f\u95f4\u7684\u65e0\u6548\u63a8\u7406）\u3001try\/catch \u5305\u4f4f\u5355\u5e27（\u5076\u53d1\u5f02\u5e38\u4e0d\u80fd\u4e2d\u65ad\u5faa\u73af）\u3002<\/p>\n

      \n

      \u4e94\u3001\u771f\u5b9e\u8e29\u5751\u8bb0\u5f55（6 \u4e2a）<\/h3>\n

      \u5751 1：Vite \u9884\u6784\u5efa face-api.js \u76f4\u63a5\u62a5\u9519<\/h4>\n

      face-api.js \u5185\u90e8\u4f9d\u8d56\u4e86\u4e00\u4e9b Node \u4fa7\u7684\u5199\u6cd5，Vite \u7684\u4f9d\u8d56\u9884\u6784\u5efa\u4f1a\u628a\u5b83\u641e\u5d29\u3002\u89e3\u6cd5\u662f\u5728 vite.config.js \u91cc\u663e\u5f0f\u6392\u9664：<\/p>\n

      export<\/span> default<\/span> defineConfig<\/span>(<\/span>{<\/span>
      \n optimizeDeps<\/span>:<\/span> {<\/span>
      \n exclude<\/span>:<\/span> [<\/span>'face-api.js'<\/span>]<\/span> \/\/ \u4e0d\u8ba9\u5b83\u8fdb\u9884\u6784\u5efa<\/span>
      \n }<\/span>
      \n}<\/span>)<\/span><\/p>\n

      \u5751 2：\u6a21\u578b\u8def\u5f84\u5e26\u524d\u5bfc\u659c\u6760，\u90e8\u7f72\u5230 GitHub Pages \u5b50\u8def\u5f84\u76f4\u63a5 404<\/h4>\n

      \u6211\u4e00\u5f00\u59cb\u5199\u7684\u662f const MODEL_URL = '\/models'，\u672c\u5730 npm run dev \u4e00\u5207\u6b63\u5e38，\u90e8\u7f72\u5230 GitHub Pages \u7684 xxx.github.io\/faceAI\/ \u5b50\u8def\u5f84\u4e4b\u540e\u5168\u90e8 404\u2014\u2014\u56e0\u4e3a\u7edd\u5bf9\u8def\u5f84\u4f1a\u6307\u5411\u7ad9\u70b9\u6839，\u800c\u4e0d\u662f\u4ed3\u5e93\u5b50\u76ee\u5f55\u3002<\/p>\n

      \u6539\u6210\u76f8\u5bf9\u8def\u5f84 'models'，\u914d\u5408 Vite \u7684 base \u914d\u7f6e\u624d\u5bf9：<\/p>\n

      const<\/span> isProd =<\/span> process.<\/span>env.<\/span>NODE_ENV<\/span> ===<\/span> 'production'<\/span> ||<\/span> process.<\/span>env.<\/span>VITE_BASE<\/span>
      \nconst<\/span> base =<\/span> isProd ?<\/span> (<\/span>process.<\/span>env.<\/span>VITE_BASE<\/span> ||<\/span> '\/faceAI\/'<\/span>)<\/span> :<\/span> '\/'<\/span><\/p>\n

      \u5751 3：Float32Array \u5b58\u4e0d\u8fdb IndexedDB<\/h4>\n

      descriptor \u662f Float32Array(128)，\u76f4\u63a5 db.faces.add({ descriptor }) \u8bfb\u51fa\u6765\u4f1a\u662f\u7a7a\u7684\u6216\u8005\u7ed3\u6784\u5f02\u5e38\u3002IndexedDB \u7684\u7ed3\u6784\u5316\u514b\u9686\u7b97\u6cd5\u5bf9 TypedArray \u7684\u652f\u6301\u5728\u4e0d\u540c\u5b9e\u73b0\u4e0b\u6709\u5dee\u5f02，\u7a33\u59a5\u505a\u6cd5\u662f\u8f6c\u6210\u666e\u901a\u6570\u7ec4：<\/p>\n

      descriptor<\/span>:<\/span> Array.<\/span>from<\/span>(<\/span>descriptor)<\/span><\/p>\n

      \u8bfb\u51fa\u6765\u6bd4\u5bf9\u65f6，\u666e\u901a\u6570\u7ec4\u7167\u6837\u80fd\u6309\u4e0b\u6807\u53d6\u503c，\u4e0d\u5f71\u54cd euclideanDistance \u7684\u8ba1\u7b97\u3002<\/p>\n

      \u5751 4：\u6444\u50cf\u5934\u955c\u50cf\u540e，\u68c0\u6d4b\u6846\u548c\u8138\u9519\u4f4d<\/h4>\n

      \u4e3a\u4e86\u7b26\u5408\u81ea\u62cd\u4e60\u60ef，\u89c6\u9891\u505a\u4e86\u955c\u50cf：<\/p>\n

      .camera-video<\/span> {<\/span>
      \n transform<\/span>:<\/span> scaleX<\/span>(<\/span>-1)<\/span>;<\/span>
      \n}<\/span><\/p>\n

      \u4f46 overlay canvas \u662f\u72ec\u7acb\u5143\u7d20，\u4e0d\u955c\u50cf\u7684\u8bdd\u6846\u4f1a\u753b\u5728\u8138\u7684\u53cd\u65b9\u5411\u3002\u5fc5\u987b\u540c\u6b65\u52a0\u4e0a：<\/p>\n

      .camera-overlay<\/span> {<\/span>
      \n position<\/span>:<\/span> absolute;<\/span>
      \n inset<\/span>:<\/span> 0;<\/span>
      \n transform<\/span>:<\/span> scaleX<\/span>(<\/span>-1)<\/span>;<\/span> \/* \u4e0e\u89c6\u9891\u4fdd\u6301\u540c\u6b65\u955c\u50cf *\/<\/span>
      \n}<\/span><\/p>\n

      \u5751 5：canvas \u5c3a\u5bf8\u6ca1\u540c\u6b65 video \u5206\u8fa8\u7387，\u6846\u6574\u4f53\u504f\u79fb<\/h4>\n

      <video> \u7684 CSS \u5c3a\u5bf8\u548c\u5b9e\u9645\u5206\u8fa8\u7387\u662f\u4e24\u56de\u4e8b\u3002canvas \u5fc5\u987b\u6309 videoWidth\/videoHeight \u8bbe\u7f6e，\u800c\u4e0d\u662f CSS \u5bbd\u9ad8：<\/p>\n

      const<\/span> syncSize<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
      \n if<\/span> (<\/span>!<\/span>canvas ||<\/span> !<\/span>v.<\/span>videoWidth)<\/span> return<\/span>
      \n canvas.<\/span>width =<\/span> v.<\/span>videoWidth
      \n canvas.<\/span>height =<\/span> v.<\/span>videoHeight
      \n}<\/span>
      \nsyncSize<\/span>(<\/span>)<\/span>
      \nv.<\/span>addEventListener<\/span>(<\/span>'loadedmetadata'<\/span>,<\/span> syncSize)<\/span> \/\/ \u5143\u6570\u636e\u5c31\u7eea\u540e\u518d\u540c\u6b65\u4e00\u6b21<\/span><\/p>\n

      \u6f0f\u6389 loadedmetadata \u90a3\u6b21\u76d1\u542c，\u7b2c\u4e00\u6b21\u542f\u52a8\u6444\u50cf\u5934\u65f6 canvas \u8fd8\u662f 300\u00d7150 \u7684\u9ed8\u8ba4\u5c3a\u5bf8\u3002<\/p>\n

      \u5751 6：\u9608\u503c 0.55 \u662f\u7ecf\u9a8c\u503c，\u522b\u5f53\u6807\u51c6\u7b54\u6848<\/h4>\n

      DISTANCE_THRESHOLD = 0.55 \u5728\u5ba4\u5185\u6b63\u5e38\u5149\u7167\u3001\u6b63\u8138\u7684\u573a\u666f\u4e0b\u8868\u73b0\u4e0d\u9519\u3002\u4f46\u9006\u5149\u3001\u6234\u5e3d\u5b50\u3001\u4fa7\u8138\u3001\u4f4e\u5206\u8fa8\u7387\u90fd\u4f1a\u8ba9\u8ddd\u79bb\u660e\u663e\u53d8\u5927\u3002\u6211\u7684\u505a\u6cd5\u662f\u628a\u9608\u503c\u505a\u6210\u754c\u9762\u4e0a\u53ef\u89c1\u7684\u53c2\u6570，\u8ba9\u7528\u6237\u6839\u636e\u5b9e\u9645\u573a\u666f\u5fae\u8c03，\u800c\u4e0d\u662f\u5199\u6b7b\u4e00\u4e2a"\u770b\u8d77\u6765\u5bf9"\u7684\u6570\u5b57\u3002<\/p>\n

      \u540c\u65f6\u8981\u63d0\u9192\u4e00\u53e5：\u8fd9\u4e2a\u6a21\u578b\u6ca1\u6709\u6d3b\u4f53\u68c0\u6d4b\u3002\u62ff\u4e00\u5f20\u7167\u7247\u5bf9\u7740\u6444\u50cf\u5934，\u7167\u6837\u80fd\u901a\u8fc7\u3002\u771f\u8981\u4e0a\u751f\u4ea7，\u5fc5\u987b\u8865\u6d3b\u4f53\u3002<\/p>\n

      \n

      \u516d\u3001\u6027\u80fd\u5b9e\u6d4b\u611f\u53d7<\/h3>\n

      \u5728\u6211\u7684\u673a\u5668\u4e0a（Ryzen 7 5800H + Chrome\/WebGL \u540e\u7aef）：<\/p>\n

        \n
      • \u6a21\u578b\u9996\u6b21\u52a0\u8f7d：\u4e09\u4e2a\u6a21\u578b\u52a0\u8d77\u6765 6.7MB，\u672c\u5730\u52a0\u8f7d 1～2 \u79d2，\u4e4b\u540e\u8fdb Service Worker \u7f13\u5b58\u57fa\u672c\u79d2\u5f00；<\/li>\n
      • \u5355\u56fe\u8bc6\u522b（inputSize 416，\u4e00\u5f20\u6b63\u8138）：\u4ece\u70b9\u51fb\u5230\u51fa\u6846\u5927\u6982\u51e0\u767e\u6beb\u79d2，\u4e3b\u8981\u8017\u65f6\u5728\u7279\u5f81\u63d0\u53d6；<\/li>\n
      • \u5b9e\u65f6\u6a21\u5f0f（inputSize 320，300ms \u95f4\u9694）：FPS \u7a33\u5b9a\u5728\u4e2a\u4f4d\u6570\u5230\u5341\u51e0\u4e4b\u95f4\u2014\u2014\u6ce8\u610f\u8fd9\u91cc\u7684 FPS \u662f"\u68c0\u6d4b\u8f6e\u6b21\/\u79d2"，\u4e0d\u662f\u6e32\u67d3\u5e27\u7387\u3002\u60f3\u518d\u5feb，\u628a DETECT_INTERVAL \u8c03\u5230 500ms\u3001inputSize \u538b\u5230 224，\u4ee3\u4ef7\u662f\u4fa7\u8138\u548c\u5c0f\u8138\u7684\u53ec\u56de\u4e0b\u964d\u3002<\/li>\n<\/ul>\n

        \u4e09\u4e2a\u8c03\u4f18\u65cb\u94ae\u7684\u5b9e\u9645\u5f71\u54cd，\u6211\u6574\u7406\u6210\u8fd9\u5f20\u8868，\u65b9\u4fbf\u4f60\u76f4\u63a5\u7167\u7740\u8c03：<\/p>\n\n\u65cb\u94ae\u8c03\u5c0f\/\u8c03\u5feb\u8c03\u5927\/\u8c03\u6162\u6211\u7684\u9ed8\u8ba4<\/tr>\n\n\n\n\n
        inputSize<\/td>\n224～320，\u901f\u5ea6\u5feb，\u5c0f\u8138\u6613\u6f0f<\/td>\n416～608，\u53ec\u56de\u9ad8，\u660e\u663e\u53d8\u5361<\/td>\n\u5355\u56fe 416 \/ \u5b9e\u65f6 320<\/td>\n<\/tr>\n
        DETECT_INTERVAL<\/td>\n100ms，\u8ddf\u624b\u4f46\u5403 CPU<\/td>\n500ms，\u7701\u7535，\u6846\u6709\u62d6\u5f71<\/td>\n300ms<\/td>\n<\/tr>\n
        \u68c0\u6d4b\u4eba\u6570<\/td>\ndetectSingleFace，\u53ea\u53d6\u6700\u5927\u8138<\/td>\ndetectAllFaces，\u652f\u6301\u591a\u4eba<\/td>\n\u5b9e\u65f6\u5355\u4eba \/ \u5355\u56fe\u591a\u4eba<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

        \u7aef\u4fa7\u63a8\u7406\u7684\u672c\u8d28\u5c31\u662f\u7528\u7cbe\u5ea6\u6362\u5ef6\u8fdf\u548c\u9690\u79c1，\u8fd9\u4e09\u4e2a\u65cb\u94ae\u600e\u4e48\u62e7，\u53d6\u51b3\u4e8e\u4f60\u7684\u573a\u666f\u66f4\u5728\u610f\u54ea\u4e00\u4e2a\u3002\u53e6\u5916\u63d0\u9192\u4e00\u70b9：\u522b\u5728\u4e3b\u7ebf\u7a0b\u4e0a\u65e0\u8282\u5236\u5730\u8dd1\u63a8\u7406\u3002\u6211\u8fd9\u4e2a\u9879\u76ee\u5f53\u524d\u8fd8\u662f\u4e3b\u7ebf\u7a0b\u8dd1 TF.js，\u56fe\u5e93\u89c4\u6a21\u5c0f\u3001\u68c0\u6d4b\u9891\u7387\u4f4e\u6240\u4ee5\u95ee\u9898\u4e0d\u5927；\u4e00\u65e6\u4f60\u628a\u95f4\u9694\u538b\u5230 100ms \u4ee5\u5185，\u8f93\u5165\u6846\u4f1a\u660e\u663e\u53d1\u6da9，\u90a3\u65f6\u5019\u5c31\u5fc5\u987b\u4e0a Web Worker \u548c OffscreenCanvas \u4e86\u3002<\/p>\n

        \u987a\u5e26\u8bf4\u4e00\u53e5，2026 \u5e74 WebGPU \u540e\u7aef\u548c Google \u65b0\u51fa\u7684 LiteRT.js \u8ba9\u6d4f\u89c8\u5668\u63a8\u7406\u901f\u5ea6\u53c8\u4e0a\u4e86\u4e00\u4e2a\u53f0\u9636\u3002\u5982\u679c\u4f60\u73b0\u5728\u65b0\u5efa\u9879\u76ee，\u503c\u5f97\u628a LiteRT.js \u653e\u8fdb\u9009\u578b\u6e05\u5355；\u4f46\u5982\u679c\u50cf\u6211\u8fd9\u6837\u8981\u6c42"\u96f6\u6539\u9020\u3001\u7a33\u5b9a\u53ef\u7528"，face-api.js \u4f9d\u7136\u662f\u6700\u7701\u4e8b\u7684\u4e00\u6761\u8def\u3002<\/p>\n

        \n

        \u4e03\u3001\u603b\u7ed3\u4e0e\u540e\u7eed<\/h3>\n

        \u8fd9\u5957\u4e1c\u897f\u7684\u6838\u5fc3\u4ef7\u503c\u5c31\u4e00\u53e5\u8bdd：\u628a\u751f\u7269\u7279\u5f81\u7559\u5728\u7528\u6237\u8bbe\u5907\u91cc\u3002\u6280\u672f\u4e0a\u6ca1\u6709\u9b54\u6cd5，\u68c0\u6d4b + \u5bf9\u9f50 + \u63d0\u7279\u5f81 + \u6bd4\u8ddd\u79bb，\u56db\u6b65\u800c\u5df2；\u96be\u7684\u662f\u5de5\u7a0b\u7ec6\u8282\u2014\u2014\u6a21\u578b\u8def\u5f84\u3001\u5b58\u50a8\u683c\u5f0f\u3001\u955c\u50cf\u540c\u6b65\u3001canvas \u5c3a\u5bf8，\u6bcf\u4e00\u4e2a\u90fd\u80fd\u8ba9\u4f60\u8c03\u534a\u5929\u3002<\/p>\n

        \u540e\u7eed\u60f3\u505a\u7684\u8fed\u4ee3：<\/p>\n

      • \u628a\u63a8\u7406\u4e22\u8fdb Web Worker + OffscreenCanvas，\u4e3b\u7ebf\u7a0b\u4e0d\u518d\u88ab\u963b\u585e；<\/li>\n
      • \u63a5\u5165 WebGPU \u540e\u7aef，\u5bf9\u6bd4 WebGL \u4e0b\u7684\u5b9e\u9645\u63d0\u901f\u5e45\u5ea6；<\/li>\n
      • \u8865\u4e00\u5c42\u6d3b\u4f53\u68c0\u6d4b（\u7728\u773c\/\u6447\u5934），\u5835\u4f4f\u7167\u7247\u653b\u51fb；<\/li>\n
      • \u5e95\u5e93\u89c4\u6a21\u4e0a\u53bb\u4e4b\u540e，\u628a\u7ebf\u6027\u6bd4\u5bf9\u6362\u6210 HNSW \u8fd1\u4f3c\u68c0\u7d22\u3002<\/li>\n
        \n

        \u5b8c\u6574\u5de5\u7a0b（\u542b public\/models\/ \u6743\u91cd\u3001\u4e00\u952e\u542f\u52a8\u811a\u672c\u3001GitHub Pages \u90e8\u7f72\u914d\u7f6e）\u6211\u5df2\u7ecf\u6574\u7406\u597d\u4e86，\u9700\u8981\u7684\u540c\u5b66\u8bc4\u8bba\u533a\u6263\u300c\u6e90\u7801\u300d，\u6211\u770b\u5230\u4f1a\u4e00\u4e00\u56de\u590d；\u4e5f\u6b22\u8fce\u70b9\u4e2a\u5173\u6ce8，\u540e\u7eed\u4f1a\u628a\u7aef\u4fa7\u63a8\u7406\u8fd9\u4e2a\u7cfb\u5217\u7ee7\u7eed\u66f4\u4e0b\u53bb\u3002<\/p>\n

        \u5982\u679c\u4f60\u5728\u8dd1\u7684\u8fc7\u7a0b\u4e2d\u9047\u5230\u4e86\u522b\u7684\u5751，\u8bc4\u8bba\u533a\u4e00\u8d77\u4ea4\u6d41，\u6211\u8e29\u5230\u7684\u65b0\u5751\u4f1a\u8865\u8fdb\u8fd9\u7bc7\u6587\u7ae0\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"

        \u7aef\u4fa7\u63a8\u7406\u4eba\u5de5\u667a\u80fdTensorFlow.js\u4eba\u8138\u8bc6\u522b\u524d\u7aef# \u7aef\u4fa7\u63a8\u7406\u5b9e\u6218：face-api.js \u96f6\u540e\u7aef\u4eba\u8138\u8bc6\u522b\u8e29\u5751\u8bb0\u4e00\u4e2a\u7eaf\u524d\u7aef\u7684\u4eba\u8138\u8bc6\u522b Demo：\u7167\u7247\u4e0d\u4e0a\u4f20\u3001\u4e0d\u8d70\u4efb\u4f55\u540e\u7aef\u63a5\u53e3\u3001\u65ad\u7f51\u4e5f\u80fd\u8dd1\u3002\u6574\u5957\u6a21\u578b 6.7MB，\u6d4f\u89c8\u5668\u91cc WebGL \u52a0\u901f，\u5b9e\u65f6\u6444\u50cf\u5934\u6a21\u5f0f\u80fd\u7a33\u5b9a\u51fa FPS\u3002\u8fd9\u7bc7\u6587\u7ae0\u628a\u300c\u68c0\u6d4b \u2192 \u5173\u952e\u70b9 \u2192 128 \u7ef4\u7279\u5f81 \u2192 \u672c\u5730\u6bd4\u5bf9\u300d\u8fd9\u6761\u94fe\u8def\u4ece\u6e90\u7801\u5c42\u9762\u62c6\u5f00，\u518d\u628a\u6211\u8e29\u8fc7\u7684 6 \u4e2a\u5751\u539f\u6837\u5949\u4e0a\u3002\u4e00\u3001\u5148\u770b\u7ed3\u679c&#x<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[722,187,190],"topic":[],"class_list":["post-103543","post","type-post","status-publish","format-standard","hentry","category-server","tag-ecmascript","tag-javascript","tag-190"],"yoast_head":"\n\u7aef\u4fa7\u63a8\u7406\u5b9e\u6218\uff1aface-api.js \u96f6\u540e\u7aef\u4eba\u8138\u8bc6\u522b\u8e29\u5751\u8bb0 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/103543.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u7aef\u4fa7\u63a8\u7406\u5b9e\u6218\uff1aface-api.js \u96f6\u540e\u7aef\u4eba\u8138\u8bc6\u522b\u8e29\u5751\u8bb0 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u7aef\u4fa7\u63a8\u7406\u4eba\u5de5\u667a\u80fdTensorFlow.js\u4eba\u8138\u8bc6\u522b\u524d\u7aef# \u7aef\u4fa7\u63a8\u7406\u5b9e\u6218：face-api.js \u96f6\u540e\u7aef\u4eba\u8138\u8bc6\u522b\u8e29\u5751\u8bb0\u4e00\u4e2a\u7eaf\u524d\u7aef\u7684\u4eba\u8138\u8bc6\u522b Demo：\u7167\u7247\u4e0d\u4e0a\u4f20\u3001\u4e0d\u8d70\u4efb\u4f55\u540e\u7aef\u63a5\u53e3\u3001\u65ad\u7f51\u4e5f\u80fd\u8dd1\u3002\u6574\u5957\u6a21\u578b 6.7MB，\u6d4f\u89c8\u5668\u91cc WebGL \u52a0\u901f，\u5b9e\u65f6\u6444\u50cf\u5934\u6a21\u5f0f\u80fd\u7a33\u5b9a\u51fa FPS\u3002\u8fd9\u7bc7\u6587\u7ae0\u628a\u300c\u68c0\u6d4b \u2192 \u5173\u952e\u70b9 \u2192 128 \u7ef4\u7279\u5f81 \u2192 \u672c\u5730\u6bd4\u5bf9\u300d\u8fd9\u6761\u94fe\u8def\u4ece\u6e90\u7801\u5c42\u9762\u62c6\u5f00，\u518d\u628a\u6211\u8e29\u8fc7\u7684 6 \u4e2a\u5751\u539f\u6837\u5949\u4e0a\u3002\u4e00\u3001\u5148\u770b\u7ed3\u679c&#x\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/103543.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-10T13:33:03+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/103543.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/103543.html\",\"name\":\"\u7aef\u4fa7\u63a8\u7406\u5b9e\u6218\uff1aface-api.js \u96f6\u540e\u7aef\u4eba\u8138\u8bc6\u522b\u8e29\u5751\u8bb0 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-09-10T13:33:03+00:00\",\"dateModified\":\"2026-09-10T13:33:03+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/103543.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/103543.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/103543.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u7aef\u4fa7\u63a8\u7406\u5b9e\u6218\uff1aface-api.js \u96f6\u540e\u7aef\u4eba\u8138\u8bc6\u522b\u8e29\u5751\u8bb0\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u7aef\u4fa7\u63a8\u7406\u5b9e\u6218\uff1aface-api.js \u96f6\u540e\u7aef\u4eba\u8138\u8bc6\u522b\u8e29\u5751\u8bb0 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/103543.html","og_locale":"zh_CN","og_type":"article","og_title":"\u7aef\u4fa7\u63a8\u7406\u5b9e\u6218\uff1aface-api.js \u96f6\u540e\u7aef\u4eba\u8138\u8bc6\u522b\u8e29\u5751\u8bb0 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u7aef\u4fa7\u63a8\u7406\u4eba\u5de5\u667a\u80fdTensorFlow.js\u4eba\u8138\u8bc6\u522b\u524d\u7aef# \u7aef\u4fa7\u63a8\u7406\u5b9e\u6218：face-api.js \u96f6\u540e\u7aef\u4eba\u8138\u8bc6\u522b\u8e29\u5751\u8bb0\u4e00\u4e2a\u7eaf\u524d\u7aef\u7684\u4eba\u8138\u8bc6\u522b Demo：\u7167\u7247\u4e0d\u4e0a\u4f20\u3001\u4e0d\u8d70\u4efb\u4f55\u540e\u7aef\u63a5\u53e3\u3001\u65ad\u7f51\u4e5f\u80fd\u8dd1\u3002\u6574\u5957\u6a21\u578b 6.7MB，\u6d4f\u89c8\u5668\u91cc WebGL \u52a0\u901f，\u5b9e\u65f6\u6444\u50cf\u5934\u6a21\u5f0f\u80fd\u7a33\u5b9a\u51fa FPS\u3002\u8fd9\u7bc7\u6587\u7ae0\u628a\u300c\u68c0\u6d4b \u2192 \u5173\u952e\u70b9 \u2192 128 \u7ef4\u7279\u5f81 \u2192 \u672c\u5730\u6bd4\u5bf9\u300d\u8fd9\u6761\u94fe\u8def\u4ece\u6e90\u7801\u5c42\u9762\u62c6\u5f00，\u518d\u628a\u6211\u8e29\u8fc7\u7684 6 \u4e2a\u5751\u539f\u6837\u5949\u4e0a\u3002\u4e00\u3001\u5148\u770b\u7ed3\u679c&#x","og_url":"https:\/\/www.wsisp.com\/helps\/103543.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-09-10T13:33:03+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"5 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/103543.html","url":"https:\/\/www.wsisp.com\/helps\/103543.html","name":"\u7aef\u4fa7\u63a8\u7406\u5b9e\u6218\uff1aface-api.js \u96f6\u540e\u7aef\u4eba\u8138\u8bc6\u522b\u8e29\u5751\u8bb0 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-09-10T13:33:03+00:00","dateModified":"2026-09-10T13:33:03+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/103543.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/103543.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/103543.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"\u7aef\u4fa7\u63a8\u7406\u5b9e\u6218\uff1aface-api.js \u96f6\u540e\u7aef\u4eba\u8138\u8bc6\u522b\u8e29\u5751\u8bb0"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/103543","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=103543"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/103543\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=103543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=103543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=103543"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=103543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}