物联网浏览器(IoTBrowser)上的人脸识别：用JS搞定门禁终端的完整实践

先聊个背景。去年接了一个门禁机改造的项目，客户要求在人脸识别门禁终端上跑一套新的识别逻辑，并且指定要在Web层面解决，不能动底层原生代码。最开始我以为是普通的H5页面塞进WebView里就行，结果一上手才发现，门禁终端用的不是普通安卓WebView，而是定制的物联网浏览器(IoTBrowser)——专门为工控、门禁、自助终端这类设备优化的浏览器内核，能直接操作摄像头、串口、RFID读卡器这些硬件。

这个场景在国内智能硬件圈其实已经很常见了：IoTBrowser跑在安卓工控板上，页面用纯JS开发，JS调用底层能力去抓视频流，再用前端AI模型做人脸检测和人脸对比。整套链路不需要写一行Java/Kotlin原生代码，上线速度快，迭代也方便。这篇文章我就把我这几个月踩过的坑、验证过的方案、量化过的性能数据完整写出来，给准备在IoTBrowser里做视觉识别项目的朋友当个参考。

1. 为什么在人脸识别项目里选中IoTBrowser，而不是普通浏览器或原生App

1.1 普通浏览器解决不了的硬件调用问题

拿这个项目举例，客户手上是一批安卓工控板，跑的是深度定制的系统，普通Chrome或WebView在权限策略上非常保守——你想用浏览器直接打开/dev/video0摄像头设备节点、直接操作串口或者读GPIO，几乎不可能。浏览器安全模型不允许网页直接访问底层硬件资源，这是底线，不是配置能绕过去的。

IoTBrowser这类物联网浏览器解决的正是这个痛点。它在内核层做了扩展，通过JSBridge把硬件能力暴露给网页层。我在项目中实际用到的能力包括：

• 直接枚举设备上的USB摄像头和MIPI摄像头，返回设备ID
• 以RTSP或YUV裸流方式获取摄像头数据
• 调用串口和IO口，控制门禁的电锁和补光灯
• 唤起本地算法库进行活体检测

这些在IoTBrowser里都是一个JS函数的事。对比之下，普通浏览器的getUserMedia只能打开系统默认摄像头，而且很多工控板上的摄像头驱动并不被Chromium识别，根本拿不到流。

1.2 IoTBrowser在项目里的真实定位

有一段时间业内流行过"纯Web做人脸识别"的做法——前端页面上用getUserMedia拿摄像头画面，再丢给在线API做识别。但实际部署到门禁这种生产环境时，问题立刻暴露：断网就罢工、延迟不稳定、识别结果回传慢。

IoTBrowser把这套逻辑拉回了终端本地。人脸检测和人脸特征提取在算力充足的工控板上本地跑，只有开门的日志和考勤记录才上报服务器。IoTBrowser在这里扮演的是"应用运行时"的角色——提供浏览器生态的开发效率，同时保留原生级的设备控制能力。我举个例子，IoTBrowser里可以这样写JS来控制补光灯：

javascript复制// 通过IoTBrowser扩展API控制GPIO
if (window.IoTBrowser && IoTBrowser.GPIO) {
    // 打开补光灯
    IoTBrowser.GPIO.write(23, 1); // 23为GPIO引脚号
    console.log("补光灯已打开");
}

这套接口在很多场景下比原生写驱动还要方便，因为不需要重新编译APK。

1.3 什么人适合选IoTBrowser这条路

我的经验是，三种项目适合在IoTBrowser上做人脸识别：

• 已有Web前端团队、不想额外养原生开发人员的团队：全部逻辑用JS写，复用现有前端工程化体系
• 需要频繁改识别逻辑和页面交互的项目：终端页面热更新，不需要发版装APK，后台推送新版HTML即可
• 硬件种类多的项目：同一套前端代码跑在不同厂商的IoTBrowser设备上，底层差异由浏览器屏蔽

如果项目对识别帧率要求极高（比如30fps以上连续追踪）、或者需要极其底层的摄像头ISP调优，那还是老老实实上原生+C++。这个边界要心里有数。

2. 人脸识别流程设计：先想清楚三个独立环节再动手

2.1 检测、对比、活体，三道独立环节别混在一起

很多初学者一上来就调库，把"人脸识别"当成一个黑盒工具。但实际工程项目必须先拆解流程。我的方案里，人脸识别被分成三个独立的JS模块：

• 人脸检测：从摄像头帧里找出"有没有人脸"以及"人脸在哪"
• 人脸对比：把检测到的人脸和底库里的特征向量做相似度计算，判定"是谁"
• 活体检测：判断镜头前的是真实的人还是照片/屏幕，防止被攻击

这三个环节特点完全不同。人脸检测每帧都要跑，要求速度快；人脸对比只在检测到人脸后触发，但要求精度高；活体检测难点在于防攻击，普通RGB摄像头方案通常需要配合动作指令。

我把三个环节做成流水线：

javascript复制async function recognitionPipeline(frame) {
    // 1. 检测
    const detections = await faceDetector.detect(frame);
    if (detections.length === 0) return { status: "no_face" };

    // 2. 活体（简单动作活体，需要用户配合摇头/眨眼）
    const livenessPassed = await livenessCheck(detections[0]);