javascript的传感器怎么做_如何使用设备陀螺仪和加速度计

JavaScript 中获取设备传感器数据首选 Generic Sensor API（如 Accelerometer、Gyroscope），精度高、延迟低，但需 HTTPS 和用户授权；兼容性要求高时可降级使用 DeviceOrientation API，仅提供融合欧拉角且 iOS 默认禁用。

JavaScript 中使用设备的陀螺仪（Gyroscope）和加速度计（Accelerometer）主要依靠 DeviceOrientation API 和更现代、更精确的 Generic Sensor API（如 Accelerometer、Gyroscope）。前者兼容性好但精度低、有权限限制；后者功能强、数据准，但需 HTTPS + 用户授权，且仅支持较新浏览器（Chrome 67+、Edge 79+，Firefox 部分支持）。

用 DeviceOrientation API 快速获取方向数据（兼容优先）

这是最广泛支持的方式，通过 deviceorientation 事件获取 alpha（绕 z 轴旋转）、beta（绕 x 轴俯仰）、gamma（绕 y 轴翻滚），以及可选的绝对方向 compassheading。注意：它不直接提供加速度或角速度原始值，而是融合后的欧拉角，且 iOS Safari 默认禁用，需用户手动开启“运动与方向”权限。

• 监听事件：window.addEventListener('deviceorientation', handler)
• 回调中读取 event.beta（前后倾斜）、event.gamma（左右倾斜）、event.alpha（面朝方向，0–360°）
• 首次触发前需用户交互（如点击按钮）才能启用，否则事件不会触发
• 适合简单交互，比如倾斜控制菜单、AR 场景粗略朝向判断

用 Generic Sensor API 获取原始传感器数据（推荐用于精准场景）

这是 W3C 标准，提供独立、高频率、低延迟的原始传感器流。需确保页面运行在 HTTPS 下，并在调用前请求权限（navigator.permissions.query({ name: 'accelerometer' }) 等）。

• 加速度计示例：const acc = new Accelerometer({ frequency: 60 }); acc.addEventListener('reading', () => { console.log(acc.x, acc.y, acc.z); }); acc.start();
• 陀螺仪示例：const gyro = new Gyroscope({ frequency: 60 }); gyro.addEventListener('reading', () => { console.log(gyro.x, gyro.y, gyro.z); }); gyro.start();
• 注意：x/y/z 单位分别是 m/s² 和 rad/s，坐标系遵循 W3C 设备坐标系（z 轴指向屏幕外）
• 部分安卓 Chrome 可能需开启 chrome://flags/#enable-generic-sensor-extra-classes 启用支持

权限与兼容性处理不能跳过

现代传感器 API 默认受保护，不处理权限会静默失败。

标签： javascript java js 浏览器 edge 安卓 safari ai ios win