今天继续处理公司项目 Bug 清单里面的问题，其中有一个涉及到权限申请，我便尝试着使用 WebRTC 的 API 自行编写逻辑，发现获取设备失败，爆出 Requested device not found 错误，可能是其中一种类型的设备不存在导致的。
// 如果没有摄像头，这里报错
await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
// 不报错
await navigator.mediaDevices.getUserMedia({ audio: true });所以这种情况往往会逐个尝试调用授权，如果无法同时申请，就尝试按设备类型申请。为了实时监测设备授权的改动，前任写了一个轮询函数检测用户操作权限更改，貌似有点傻（浏览器自身的建议是修改权限后让用户刷新页面，但产品经理的意思看起来就是得实时生效）。
我顿时想到了「设备变更事件」，但这只涉及到设备接入断开，问题就变成了“如果没有授权是不是不会有变更”和“如果授权了，系统自带设备接入会变更吗”，需要验证的条件还挺多，如此看来貌似原先轮询的办法又显得合理了。
成功获取到任意类型设备之后，会得到一个 MediaDeviceInfo 数组对象。如果设备存在，但浏览器设置处没有完全允许（选择“询问”），则获取的 deviceId 会为空，这种情况依旧视为未授权。
调试过程中发现我 MacBook 的 CPU 占用异常的高，发现大概率是性能监视器本身的图表渲染导致的，并非是公司项目本身运行的问题。
继续看下一个 Bug，切换页面之后后退返回，页面状态错误。我想到了 Safari 的后退貌似存在页面缓存，查了下 MDN，这个问题可通过 window.pageshow 事件结合其检测 persisted 属性判断。
实际操作后，再结合我的小窝后台（这个项目就存在后退的 Bug，反复后退依旧停留当前页面，除非刷新）发现这个事件在后退的时候压根就没有触发，看起来依旧是个特别诡异的问题。比较怀疑公司项目是因为 Socket 断连或者没有实时更新功能，和我项目实际遇到的问题不同，得后续继续分析...
被安利的工具：
- Caddy：HTTP 服务器
- acme.sh：获取 SSL 证书
- Cypress：前端 E2E 测试工具