1# 使用运动和方向传感器监测设备状态
2
3## 概述
4
5运动和方向传感器，如加速度计、陀螺仪等，能够监测设备的运动状态和方向变化，例如设备的旋转、倾斜等。
6通过W3C标准协议接口，Web组件能够访问这些传感器的数据，进而实现更加丰富的用户交互功能。例如，开发者在网页应用中可以利用加速度计识别运动模式，指导用户进行健身运动，利用陀螺仪捕获玩家手中设备的倾斜和旋转动作，实现无按钮操控的游戏体验。
7
8通过在JavaScript中调用以下支持的W3C标准协议接口，可以访问运动和方向传感器。
9
10| 接口                      | 名称         | 说明                                                                                                                                                     |
11| ------------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
12| Accelerometer             | 加速度       | 可获取设备X、Y、Z轴方向的加速度数据。                                                                                                                    |
13| Gyroscope                 | 陀螺仪       | 可获取设备X、Y、Z轴方向的角速度数据。                                                                                                                    |
14| AbsoluteOrientationSensor | 绝对定位     | 可获取表示设备绝对定位方向的四元数，包含X、Y、Z和W分量。                                                                                                 |
15| RelativeOrientationSensor | 相对定位     | 可获取表示设备相对定位方向的四元数，包含X、Y、Z和W分量。                                                                                                 |
16| DeviceMotionEvent         | 设备运动事件 | 通过监听该事件，可获取设备在X、Y、Z轴方向上的加速度数据，设备在X、Y、Z轴方向上包含重力的加速度数据，以及设备在alpha、beta、gamma轴方向上旋转的速率数据。 |
17| DeviceOrientationEvent    | 设备方向事件 | 通过监听该事件，可获取设备绕X、Y、Z轴的角度。                                                                                                            |
18
19## 需要权限
20
21使用加速度、陀螺仪及设备运动事件接口时，需在配置文件module.json5中声明相应的传感器权限。具体配置方法请参考[在配置文件中声明权限](../security/AccessToken/declare-permissions.md)。
22
23```
24    "requestPermissions":[
25      {
26        "name" : "ohos.permission.ACCELEROMETER" // 加速度权限
27      },
28      {
29        "name" : "ohos.permission.GYROSCOPE"     // 陀螺仪权限
30      }
31    ]
32```
33
34Web组件在对接运动和方向传感器时，需配置[onPermissionRequest](../reference/apis-arkweb/ts-basic-components-web.md#onpermissionrequest9)接口，通过该接口接收权限请求通知。
35
36## 开发步骤
37
381. 应用侧代码中，Web组件配置[onPermissionRequest](../reference/apis-arkweb/ts-basic-components-web.md#onpermissionrequest9)接口，可通过[PermissionRequest](../reference/apis-arkweb/ts-basic-components-web.md#permissionrequest9)的[getAccessibleResource](../reference/apis-arkweb/ts-basic-components-web.md#getaccessibleresource9)接口获取请求权限的资源类型，当资源类型为TYPE_SENSOR时，进行传感器授权处理。
39
40   ```ts
41   import { webview } from '@kit.ArkWeb';
42   import { abilityAccessCtrl, PermissionRequestResult } from '@kit.AbilityKit';
43   import { BusinessError } from '@kit.BasicServicesKit';
44
45   @Entry
46   @Component
47   struct WebComponent {
48     controller: webview.WebviewController = new webview.WebviewController()
49     aboutToAppear() {
50       // 配置Web开启调试模式
51       webview.WebviewController.setWebDebuggingAccess(true);
52       // 访问控制管理, 获取访问控制模块对象。
53       let atManager = abilityAccessCtrl.createAtManager();
54       try {
55         atManager.requestPermissionsFromUser(getContext(this), ['ohos.permission.ACCELEROMETER', 'ohos.permission.GYROSCOPE']
56           , (err: BusinessError, data: PermissionRequestResult) => {
57           console.info('data:' + JSON.stringify(data));
58           console.info('data permissions:' + data.permissions);
59           console.info('data authResults:' + data.authResults);
60         })
61       } catch (error) {
62         console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
63       }
64     }
65
66     build() {
67       Column() {
68         Web({ src: $rawfile('index.html'), controller: this.controller })
69           .onPermissionRequest((event) => {
70             if (event) {
71               AlertDialog.show({
72                 title: 'title',
73                 message: 'text',
74                 primaryButton: {
75                   value: 'deny',
76                   action: () => {
77                     event.request.deny();
78                   }
79                 },
80                 secondaryButton: {
81                   value: 'onConfirm',
82                   action: () => {
83                     event.request.grant(event.request.getAccessibleResource());
84                   }
85                 },
86                 autoCancel: false,
87                 cancel: () => {
88                   event.request.deny();
89                 }
90               })
91             }
92           })
93       }
94     }
95   }
96   ```
97
982. 在前端页面代码中，利用JavaScript调用传感器相关的W3C标准协议接口。
99
100   ```html
101   <!DOCTYPE HTML>
102   <html>
103   <head>
104       <meta charset="utf-8" />
105       <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
106       <meta name="misapplication-tap-highlight" content="no" />
107       <meta name="HandheldFriendly" content="true" />
108       <meta name="MobileOptimized" content="320" />
109       <title>运动和方向传感器</title>
110       <meta charset="UTF-8">
111       <style>
112           body {
113               font-family: Arial, sans-serif;
114           }
115       </style>
116       <script type="text/javascript">
117           // 访问设备的加速度计传感器，并获取其数据。
118           function getAccelerometer() {
119               var acc = new Accelerometer({frequency: 60});
120               acc.addEventListener('activate', () => console.log('Ready to measure.'));
121               acc.addEventListener('error', error => console.log('Error type: ' + error.type + ', error: ' + error.error ));
122               acc.addEventListener('reading', () => {
123                   console.log(`Accelerometer ${acc.timestamp}, ${acc.x}, ${acc.y}, ${acc.z}.`);
124               });
125               acc.start();
126           }
127
128           // 访问设备的陀螺仪传感器，并获取其数据。
129           function getGyroscope() {
130               var gyr = new Gyroscope({frequency: 60});
131               gyr.addEventListener('activate', () => console.log('Ready to measure.'));
132               gyr.addEventListener('error', error => console.log('Error type: ' + error.type + ', error: ' + error.error ));
133               gyr.addEventListener('reading', () => {
134                   console.log(`Gyroscope ${gyr.timestamp}, ${gyr.x}, ${gyr.y}, ${gyr.z}.`);
135               });
136               gyr.start();
137           }
138
139           // 访问设备的方向传感器，并获取其数据。
140           function getAbsoluteOrientationSensor() {
141               var aos = new AbsoluteOrientationSensor({frequency: 60});
142               aos.addEventListener('activate', () => console.log('Ready to measure.'));
143               aos.addEventListener('error', error => console.log('Error type: ' + error.type + ', error: ' + error.error ));
144               aos.addEventListener('reading', () => {
145                   console.log(`AbsoluteOrientationSensor data: ${aos.timestamp}, ${aos.quaternion}`);
146               });
147               aos.start();
148           }
149
150           // 监听设备的运动事件，并执行相应的处理逻辑。
151           function listenDeviceMotionEvent() {
152               removeDeviceMotionEvent();
153               if ('DeviceMotionEvent' in window) {
154                   window.addEventListener('devicemotion', handleMotionEvent, false);
155               } else {
156                 console.log('不支持DeviceMotionEvent');
157               }
158           }
159
160           // 移除之前添加的设备运动事件监听器。
161           function removeDeviceMotionEvent() {
162               if ('DeviceMotionEvent' in window) {
163                 window.removeEventListener('devicemotion', handleMotionEvent, false);
164               } else {
165                 console.log('不支持DeviceOrientationEvent');
166               }
167           }
168
169           // 处理运动事件。
170           function handleMotionEvent(event) {
171               const x = event.accelerationIncludingGravity.x;
172               const y = event.accelerationIncludingGravity.y;
173               const z = event.accelerationIncludingGravity.z;
174               console.log(`DeviceMotionEvent data: ${event.timeStamp}, ${x}, ${y}, ${z}`);
175           }
176
177           // 监听设备方向的变化，并执行相应的处理逻辑。
178           function listenDeviceOrientationEvent() {
179               removeDeviceOrientationEvent();
180               if ('DeviceOrientationEvent' in window) {
181                   window.addEventListener('deviceorientation', handleOrientationEvent, false);
182               } else {
183                   console.log('不支持DeviceOrientationEvent');
184               }
185           }
186
187           // 移除之前添加的设备方向事件监听器。
188           function removeDeviceOrientationEvent() {
189               if ('DeviceOrientationEvent' in window) {
190                 window.removeEventListener('deviceorientation', handleOrientationEvent, false);
191               } else {
192                 console.log('不支持DeviceOrientationEvent');
193               }
194           }
195
196           // 监听设备方向的变化，并执行相应的处理逻辑。
197           function listenDeviceOrientationEvent2() {
198               removeDeviceOrientationEvent2();
199               if ('DeviceOrientationEvent' in window) {
200                   window.addEventListener('deviceorientationabsolute', handleOrientationEvent, false);
201               } else {
202                   console.log('不支持DeviceOrientationEvent');
203               }
204           }
205
206           // 移除之前添加的设备方向事件监听器。
207           function removeDeviceOrientationEvent2() {
208               if ('DeviceOrientationEvent' in window) {
209                 window.removeEventListener('deviceorientationabsolute', handleOrientationEvent, false);
210               } else {
211                 console.log('不支持DeviceOrientationEvent');
212               }
213           }
214
215           // 处理方向事件。
216           function handleOrientationEvent(event) {
217               console.log(`DeviceOrientationEvent data: ${event.timeStamp}, ${event.absolute}, ${event.alpha}, ${event.beta}, ${event.gamma}`);
218           }
219       </script>
220   </head>
221   <body>
222   <div id="dcontent" class="dcontent">
223       <h3>运动和方向:</h3>
224       <ul class="dlist">
225           <li><button type="button" onclick="getAccelerometer()">加速度</button></li>
226           <li><button type="button" onclick="getGyroscope()">陀螺仪</button></li>
227           <li><button type="button" onclick="getAbsoluteOrientationSensor()">设备方向(绝对定位)</button></li>
228           <li><button type="button" onclick="listenDeviceMotionEvent()">设备运动事件</button></li>
229           <li><button type="button" onclick="listenDeviceOrientationEvent()">设备方向事件</button></li>
230           <li><button type="button" onclick="listenDeviceOrientationEvent2()">设备方向事件(绝对定位)</button></li>
231       </ul>
232   </div>
233   </body>
234   </html>
235   ```
236