web camera 重复出现摄像头权限请求弹框问题

最近在做一个web camera的需求。基本功能是结合图像识别算法,进行证件或者活体的验证。

在实现H5的功能时,衍生出息屏后也需要正常使用的需求,所以增加了visibilitychange监听事件的逻辑,当前页面变为可见时,先关闭web camera,再重新打开web camera。

这里其实经历了两次变化。

第一次:活体检测息屏后,由于没有立即关掉camera,同时也没有终止requestAnimation事件,导致息屏后活体检测的逻辑仍然在走,对于动作检测完全不准确。所以我针对活体检测的visibilitychange监听事件做了调整。当前页面不可见时,关闭camera,页面可见时,再重新打开web camera。

本来功能是很顺畅的。但我们遇到了真我GT 6T这个奇葩。每次打开web camera都要请求一次权限,同时请求一次权限就会触发visibilitychange监听事件,触发监听事件后,由于当前页面是可见的,所以会再次触发打开web camera。就这样,A 触发B,B触发A,A再触发B,B再触发A。导致不断出现请求权限弹框,流程完全无法走下去。

所以进行了第二次改动。

第二次:调整第一次的逻辑。恢复原来visibilitychange监听事件的逻辑:当前页面变为可见时,先关闭web camera,再重新打开web camera。

但是在活体检测组件本身增加visibilitychange监听事件,当页面不可见时,取消requestAnimationFrame逻辑。在打开web camera 后,重新执行活体检测功能。

目前看来,这个处理方法比较可靠。

相关推荐
UrbanJazzerati13 小时前
事件传播机制详解(附直观比喻和代码示例)
前端
青青家的小灰灰13 小时前
透视 React 内核:Diff 算法、合成事件与并发特性的深度解析
前端·javascript·react.js
SuperEugene13 小时前
组合式函数 、 Hooks(Vue2 mixin 、 Vue3 composables)的实战封装
前端·javascript·vue.js
乡村中医13 小时前
AI Chat实现第一步,流式输出,教你如何实现打字流
前端
程序员阿峰13 小时前
这5个CSS新特性已经强到离谱,攻城狮直呼内行
前端
阿星AI工作室13 小时前
给openclaw龙虾造了间像素办公室!实时看它写代码、摸鱼、修bug、写日报,太可爱了吧!
前端·人工智能·设计模式
Kayshen13 小时前
我用纯前端逆向了 Figma 的二进制文件格式,实现了 .fig 文件的完整解析和导入
前端·agent·ai编程
wuhen_n13 小时前
模板编译三阶段:parse-transform-generate
前端·javascript·vue.js
椰子皮啊13 小时前
音视频会议 ASR 实战:概率性识别不准问题定位与解决
前端
小码哥_常13 小时前
Kotlin扩展:为代码注入新活力
前端