大家周五好。
现在的前端已经不是当年的“切图仔”了。
随着WebAssembly和WebGPU的成熟，浏览器已经变成了一个高性能计算平台。
场景还原：
你需要做一个“实名认证”功能，或者一个“视频会议背景虚化”功能。
今天，我们用 Google 的TensorFlow.js，配合轻量级模型BlazeFace，实现毫秒级的人脸检测。
01. 为什么要用 TensorFlow.js？
隐私安全：数据不用离线，用户更放心。
低成本：利用用户自己的 GPU（显卡）算力，帮公司省服务器钱。
实时性：视频流是 30fps 的，只有前端本地计算才能跟得上这个速度。
2026 年的加速引擎：WebGPU
以前 TF.js 用 WebGL 加速，现在默认支持WebGPU。性能提升了 10 倍以上，甚至能在手机浏览器上跑大模型。
02. 实战：环境准备
我们需要安装两个核心包：
引擎：@tensorflow/tfjs
模型：@tensorflow-models/blazeface(Google 训练好的轻量级人脸检测模型)
npm install @tensorflow/tfjs @tensorflow-models/blazeface
03. 核心代码：三步走
第一步：打开摄像头 (复习一下 WebRTC)
// 获取 Video 元素const video = document.getElementById('webcam');async function setupCamera() { const stream = await navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 }, audio: false }); video.srcObject = stream; // 等待视频加载完成 return new Promise((resolve) => { video.onloadedmetadata = () => { resolve(video); }; });}
第二步：加载 AI 模型
import * as tf from '@tensorflow/tfjs';import * as blazeface from '@tensorflow-models/blazeface';async function loadModel() { // 🌟 2026 最佳实践：显式指定 WebGPU 后端 await tf.setBackend('webgpu'); console.log('正在加载模型...'); const model = await blazeface.load(); console.log('模型加载完毕！'); return model;}
第三步：实时预测与绘制
async function detect(video, model) { const canvas = document.getElementById('output'); const ctx = canvas.getContext('2d'); // 1. AI 预测 (returnPromise: false 表示返回 Tensor，速度更快) const predictions = await model.estimateFaces(video, false); // 2. 清空画布，准备重绘 ctx.drawImage(video, 0, 0, 640, 480); if (predictions.length > 0) { predictions.forEach((prediction) => { const start = prediction.topLeft; // [x, y] const end = prediction.bottomRight; // [x, y] const size = [end[0] - start[0], end[1] - start[1]]; // 3. 画个红框 (或者贴个 emoji) ctx.beginPath(); ctx.lineWidth = "4"; ctx.strokeStyle = "red"; ctx.rect(start[0], start[1], size[0], size[1]); ctx.stroke(); // 或者：给脸打码 // ctx.filter = 'blur(10px)'; // ctx.drawImage(canvas, start[0], start[1], size[0], size[1], start[0], start[1], size[0], size[1]); }); } // 4. 下一帧继续 requestAnimationFrame(() => detect(video, model));}
这是一个死循环（递归），每一帧都去检测。
04. 启动！
async function main() { await setupCamera(); const model = await loadModel(); detect(document.getElementById('webcam'), model);}main();
当你运行这段代码，你会发现浏览器里的你，脸上多了一个紧紧跟随的红框。无论你摇头、晃脑，它都死死咬住你不放。
这就是前端 AI的魅力。
05. 进阶玩法：不仅是画框
拿到了人脸坐标(x, y, w, h)，你能做的事情太多了：
虚拟试戴：在眼睛坐标上贴一副眼镜图片。
隐私保护：视频会议时，检测到人脸以外的区域，全部高斯模糊（背景虚化）。
疲劳监测：结合face-landmarks模型，检测眼睛是否闭合，判断司机是否疲劳（车载 H5）。
结语
不要觉得 AI 离前端很远。
在 2026 年，前端工程师的能力边界正在被无限拓宽。左手Node.js做架构，右手TensorFlow.js搞智能。
10个月宝宝每天需要喝多少奶粉？