不常用的浏览器 API —— Sensor

363 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第12天,点击查看活动详情

不常用的浏览器 API,这一节要看的是 Sensor API,Sensor 是传感器 API,它提供了一系列访问传感器的接口,我们可以使用 Sensor API 实现在浏览器中调用传感器的效果。

传感器的能力是和硬件设备强相关的,尤其是在移动端设备上,传感器是重要的交互接口,在移动 APP 上有着广泛的应用,调用传感器能力可以构建交互性更强的应用。但是长期以来传感器一直是 native 开发的相关技术,web 环境由于天然的隔离效果,对系统级 API 的访问能力一直是受限的,因此传感器作为硬件信息,web 开发者通常不去关注。但是随着浏览器推出 Sensor API,前端开发者也可以使用传感器了。

传感器对应提供的一个类是 Sensor,它是一个基类,我们通常不会直接使用 Sensor,而是针对具体的传感器调用相应的子类。比如通过 Accelerometer 获取加速度加速度传感器信息,使用Gyroscope 获取陀螺仪信息等,Sensor 定义的是一系列通用的方法。

使用传感器首先要进行能力检测,这里可以通过判断 window 上是否有对应的函数来确定浏览器支持情况。如果设备支持传感器,还要有用户的授权才能调用,这里又需要用到 permissions API 的 query 方法。之后创建传感器实例,通过 onreading 事件来获取到数据的信息回调。

不同的传感器除了类名不同,上面 API 的用法都是遵循 Sensor 接口的,因此使用方法基本上是一致的,这里需要多写一些防御代码,避免可能出现的异常场景。