aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/sensor_apis/index.html
blob: 0b49b766b742dca8543bbbaa05275b7f327c65de (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
---
title: Sensor APIs
slug: Web/API/Sensor_APIs
tags:
  - 传感器
  - 传感器API
  - 参考
  - 概述
  - 通用传感器API
translation_of: Web/API/Sensor_APIs
---
<div>{{APIRef("Generic Sensor API")}}</div>

<div class="summary">
<p>传感器API (Sensor APIs)是一组统一设计的接口,它们在web平台中为各类传感器提供了一致的访问方式。</p>
</div>

<h2 id="传感器API的概念和使用">传感器API的概念和使用</h2>

<p>尽管通用传感器API规范(Generic Sensor API specification)定义了一个 {{domxref('Sensor')}} 接口,但作为web开发者不应该直接使用它。你应该使用它的某个子类来获得指定的传感器数据。例如,{{domxref('accelerometer')}}接口返回设备当前沿所有三个轴的加速度。</p>

<p>传感器接口不一定与物理上的传感器一一对应。例如,{{domxref('Gyroscope')}} 接口确实与一个单独的物理器件接口对应,但{{domxref('AbsoluteOrientationSensor')}}接口提供的信息则是来自两个或更多传感器器件的数据通过算法得到的。这两类传感器分别被称为<em>低级的</em><em>low-level</em>)和<em>高级的</em><em>high-level</em>)。后者也被称为融合传感器(fusion sensor),或者虚拟(virtual)传感器,或称合成(synthetic)传感器。</p>

<h3 id="功能检测">功能检测</h3>

<p>传感器接口仅仅是底层器件传感器的代理。因此,相比其它API,传感器功能检测更为复杂。传感器API的存在并不能告诉你API是否与一个真实的硬件传感器相连,即使相连它是否在工作,甚至用户是否已经授权访问它。要一致地提供所有这些信息是要消耗性能和电池电量的。</p>

<p>因此,传感器API的功能检测必须包含API本身的检测以及<a href="#Defensive_Programming">防御性编程策略(见下)</a>(defensive programming strategies)。</p>

<p>下面的例子展示了检测传感器API的三种方法。此外你还可以把对象实例化部分放在一个{{jsxref('statements/try...catch', 'try...catch')}} 块中。注意通过你并不能通过{{domxref('Navigator')}} 接口来实现传感器检测。</p>

<pre class="brush: js">if (typeof Gyroscope === "function") {
    // run in circles...
}

if ("ProximitySensor" in window) {
    // watch out!
}

if (window.AmbientLightSensor) {
    // go dark...
}</pre>

<h3 id="许可和功能策略">许可和功能策略</h3>

<p>只有用户对针对某种类型的传感器授权之后,才能对该类传感器进行读取。用{{domxref('Permissions')}} API来进行这种授权。下面的小例子展示了在试图使用传感器之前首先请求授权。</p>

<pre class="brush: js">navigator.permissions.query({ name: 'accelerometer' })
.then(result =&gt; {
  if (result.state === 'denied') {
    console.log('Permission to use accelerometer sensor is denied.');
    return;
  }
  // Use the sensor.
}</pre>

<p>另外一种方式是利用错误并侦听<code>SecurityError</code>事件。</p>

<pre class="brush: js">const sensor = new AbsoluteOrientationSensor();
sensor.start();
sensor.onerror = event =&gt; {
  if (event.error.name === 'SecurityError')
    console.log("No permissions to use AbsoluteOrientationSensor.");
};</pre>

<p>下表描述了每种传感器类型,使用它们在Permissions API、{{HTMLElement('iframe')}} 元素中<code>allow</code> 属性,以及{{httpheader('Feature-Policy')}}语句中被引用时使用的名字。</p>

<table class="standard-table">
 <caption>Sensor permissions</caption>
 <thead>
  <tr>
   <th scope="col">Sensor</th>
   <th scope="col">Permission/Feature Policy Name</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>AbsoluteOrientationSensor</code></td>
   <td><code>'accelerometer'</code><code>'gyroscope'</code>, and <code>'magnetometer'</code></td>
  </tr>
  <tr>
   <td><code>Accelerometer</code></td>
   <td><code>'accelerometer'</code></td>
  </tr>
  <tr>
   <td><code>AmbientLightSensor</code></td>
   <td><code>'ambient-light-sensor'</code></td>
  </tr>
  <tr>
   <td><code>Gyroscope</code></td>
   <td><code>'gyroscope'</code></td>
  </tr>
  <tr>
   <td><code>LinearAccelerationSensor</code></td>
   <td><code>'accelerometer'</code></td>
  </tr>
  <tr>
   <td><code>Magnetometer</code></td>
   <td><code>'magnetometer'</code></td>
  </tr>
  <tr>
   <td><code>RelativeOrientationSensor</code></td>
   <td><code>'accelerometer'</code>, and <code>'gyroscope'</code></td>
  </tr>
 </tbody>
</table>

<h3 id="读数">读数</h3>

<p>传感器读数通过{{domxref('Sensor.onreading')}}回调函数获得,该回调函数被所有传感器类型继承。读取频率可通过在传感器的构造函数中带相应的选项来指定。此选项是一个数值,它指定每秒读取的次数。可使用整数或小数,后者用于频率低于每秒一次的情况。实际的读取频率依赖于器件的硬件实现因而可能小于所请求的频率。</p>

<p>下面以{{domxref('Magnetometer')}}为例展示使用方法。</p>

<pre class="brush: js">let magSensor = new Magnetometer({frequency: 60});

magSensor.addEventListener('reading', e =&gt; {
  console.log("Magnetic field along the X-axis " + magSensor.x);
  console.log("Magnetic field along the Y-axis " + magSensor.y);
  console.log("Magnetic field along the Z-axis " + magSensor.z);
})
magSensor.addEventListener('error', event =&gt; {
  console.log(event.error.name, event.error.message);
})
magSensor.start();</pre>

<h3 id="防御性编程"><a id="Defensive_Programming" name="Defensive_Programming">防御性编程</a></h3>

<p>防御性编程(defensive programming)要遵循下面三个原则:</p>

<ul>
 <li>实例化一个传感器对象时要检查抛出的错误。</li>
 <li>使用中要侦听抛出的错误。</li>
 <li>正确处理错误以提升用户体验而非相反</li>
</ul>

<p>下面的示例代码说明以上原则。{{jsxref('statements/try...catch', 'try...catch')}}代码块捕捉在实例化传感器时抛出的错误。它实现了一个{{domxref('Sensor.onerror')}}处理函数以捕捉使用中抛出的错误。它只在以下情况下提示用户:需要请求<a href="/docs/Web/API/Permissions_API">权限</a>时,以及所请求的传感器类型在设备上不支持时。</p>

<div class="note">
<p>如果一个功能策略(feature policy)阻止了对某功能的使用,这是因为你的代码与你的服务器上设置的策略不一致。这种情况是不应该显示给用户看的。具体实现请参见{{httpheader('Feature-Policy')}}</p>
</div>

<pre class="brush: js">let accelerometer = null;
try {
    accelerometer = new Accelerometer({ referenceFrame: 'device' });
    accelerometer.addEventListener('error', event =&gt; {
        // Handle runtime errors.
        if (event.error.name === 'NotAllowedError') {
            // Branch to code for requesting permission.
        } else if (event.error.name === 'NotReadableError' ) {
            console.log('Cannot connect to the sensor.');
        }
    });
    accelerometer.addEventListener('reading', () =&gt; reloadOnShake(accelerometer));
    accelerometer.start();
} catch (error) {
    // Handle construction errors.
    if (error.name === 'SecurityError') {
        // See the note above about feature policy.
        console.log('Sensor construction was blocked by a feature policy.');
    } else if (error.name === 'ReferenceError') {
        console.log('Sensor is not supported by the User Agent.');
    } else {
        throw error;
    }
}</pre>

<h2 id="接口">接口</h2>

<dl>
 <dt>{{domxref('AbsoluteOrientationSensor')}}</dt>
 <dd>描述相对于地球参考坐标系的设备物理方向。</dd>
 <dt>{{domxref('Accelerometer')}}</dt>
 <dd>提供沿三个轴的加速度。</dd>
 <dt>{{domxref('AmbientLightSensor')}}</dt>
 <dd>返回当前光照强度或环境光照度。</dd>
 <dt>{{domxref('Gyroscope')}}</dt>
 <dd>提供三个轴向的角速度。</dd>
 <dt>{{domxref('LinearAccelerationSensor')}}</dt>
 <dd>提供去除重力贡献部分之后的沿三个轴的加速度。</dd>
 <dt>{{domxref('Magnetometer')}}</dt>
 <dd>提供由设备主磁传感器检测到的磁场信息。</dd>
 <dt>{{domxref('OrientationSensor')}}</dt>
 <dd>{{domxref('AbsoluteOrientationSensor')}}的基类。本接口不能直接使用。它提供其继承类可访问的属性和方法。</dd>
 <dt>{{domxref('RelativeOrientationSensor')}}</dt>
 <dd>描述设备与地球参考坐标系无关的物理方向。  </dd>
 <dt>{{domxref('Sensor')}}</dt>
 <dd>所有其它传感器接口的基类。本接口不能直接使用。它提供其继承类可访问的属性、事件处理函数及方法。</dd>
 <dt>{{domxref('SensorErrorEvent')}}</dt>
 <dd>提供由{{domxref('Sensor')}}或其相关的接口抛出的错误的信息。</dd>
</dl>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
  <tr>
   <td>{{SpecName('Generic Sensor')}}</td>
   <td>{{Spec2('Generic Sensor')}}</td>
   <td>初始定义。</td>
  </tr>
  <tr>
   <td>{{SpecName('Accelerometer')}}</td>
   <td>{{Spec2('Accelerometer')}}</td>
   <td><code>定义Accelerometer</code><code>LinearAccerationSensor</code></td>
  </tr>
  <tr>
   <td>{{SpecName('AmbientLight')}}</td>
   <td>{{Spec2('AmbientLight')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('Gyroscope')}}</td>
   <td>{{Spec2('Gyroscope')}}</td>
   <td>初始定义。</td>
  </tr>
  <tr>
   <td>{{SpecName('Magnetometer')}}</td>
   <td>{{Spec2('Magnetometer')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('Orientation Sensor')}}</td>
   <td>{{Spec2('Orientation Sensor')}}</td>
   <td>定义<code>AbsoluteOrientationSensor</code><code>RelativeOrientationSensor</code></td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("api.Sensor")}}</p>