Web与传感器：Generic Sensor API

时间 2019-12-04

标签 web 传感器 generic sensor api 栏目 HTML 繁體版

原文原文链接

什么是 Generic Sensor API？

Generic Sensor API 提供了一组属性和方法，将传感器暴露给 Web 端应用。在这个标准中，规定了基本的接口和类，使得在实现各类传感器 API 时可以经过继承快速实现。在介绍完本标准后，我会举例使用其中一个传感器 API。javascript

与 DeviceMotion 和 DeviceOrientation 这些已有的可以提供传感器数据的 API 相比之下，Generic Sensor API 体现出了许多好处：java

Generic Sensor API 可以很是容易地扩展出新的传感器类，同时，扩展出的新类与父类接口保持一致。因为这些一致性，用于一个传感器的代码通过少许修改以后便可用于另外一个传感器上
你能够配置传感器，例如，设置适合你的应用的采样率
你能够检测某个传感器是否可用
传感器读数有着精度很是高的时间戳，使用高精度的时间戳能够与应用中的额其余活动进行同步
传感器数据模型以及坐标系统有这很是明确的定义，使得浏览器厂商可以实现具备互通性的解决方案
基于 Generic Sensor API 的接口不依赖 DOM 相关对象（Navigator 以及 Window 对象），这给将来在 Service Worker，无头 JS 运行时（如嵌入式设备）带来应用的可能
相对于旧的 API，Generic Sensor API 还带来了更好的安全和隐私保护能力

Chrome 中已实现的传感器

类名	传感器
Accelerometer	加速度计
Gyroscope	陀螺仪
LinearAccelerationSensor	线性加速传感器
AbsoluteOrientationSensor	绝对方向传感器
RelativeOrientationSensor	相对方向传感器
AmbientLightSensor	环境光传感器
Magnetometer	磁力计

接下来咱们来详细了解 Generic Sensor API 中的属性和方法web

Generic Sensor API

传感器生命周期

首先构建传感器对象，进入空闲状态，调用 start 方法以后进行激活（激活中状态），若是发生错误，则回到空闲状态，成功则进入已激活状态。调用 stop 或出错，则返回空闲状态。浏览器

垃圾回收策略

当传感器属于“激活中”的状态而且注册了 activated, reading, error 事件时不会被回收
当传感器属于“已激活”的状态而且注册了 reading, error 事件时不会被回收

SensorOptions

SensorOptions 是用于在构建传感器对象时传入的配置项，在 Generic Sensor API 的基类中支持一种设置安全

设置	做用
frequency	采样率，单位 Hz

activated 属性

该属性用于检测当前传感器是否属于已激活的状态，是则返回 trueui

hasReading 属性

该属性首先会检查最近一次读数的时间戳，若是有则返回 truegoogle

timestamp 属性

该属性用于读取最近一次读数的时间戳的值spa

start 方法

start 方法会开始对传感器数据进行采样，采样率能够在构建传感器对象时经过参数传入。code

若是平台与传感器之间没法创建链接，将会抛出 NotReadableError 异常；cdn

若是平台没有访问传感器的权限，将会抛出NotAllowedError 异常

stop 方法

stop 方法将会中止对传感器的数据采样，并将传感器置为空闲状态

reading 事件

当调用 start 方法以后，根据设定的采样率，将会按照采样率采样数据并经过该事件通知产生了读数

active 事件

在传感器的生命周期中，若是状态从 activating 变动到 activated 时将会触发此事件

error 事件

当操做传感器时或传感器出现异常时将会经过此事件抛出

AmbientLightSensor

如今，咱们将使用 AmbientLightSensor 为例，制做一个简单的页面，根据返回的数值（光照度 lux）改变背景，小于 100 lux 时变为黑色背景。

检测是否支持

首先经过简单的检查，查看当前平台是否支持此传感器

if (window.AmbientLightSensor) {
    ...
} else {
    ...
}
复制代码

初始化并添加事件处理

const als = new AmbientLightSensor();
als.addEventListener('reading', () => {
    ...
})
复制代码

调用 start 方法开始读数

als.start();
复制代码

效果

经过在 reading 事件中判断光照度，动态改变界面样式

若是没有成功读取数值，先尝试在 flags 中将 Generic Sensor Extra Classes 开启：

最后

在 Chrome 中，一部分传感器实现已是默认开启了，例如 Gyroscope, Magnetometer 等。经过传感器数据，在 Web 端将能实现更多更好的交互。