HTML5 的设备访问（Device Access）功能允许 Web 应用程序通过浏览器访问设备的输入和输出功能，从而与用户的硬件设备进行交互。

这使得 Web 应用可以更加紧密地集成设备功能，提供更丰富的用户体验。以下是 HTML5 中设备访问的几个方面：

1. 地理位置（Geolocation）：HTML5 引入了 Geolocation API，使得 Web 应用能够获取用户设备的地理位置信息。这为开发基于地理位置的应用（如地图导航、位置服务等）提供了便捷的途径。

2. 摄像头和麦克风（Media Devices）：通过 Media Devices API，Web 应用可以访问用户设备的摄像头和麦克风，从而实现实时视频通话、视频录制和音频录制等功能。

3. 传感器数据（Sensors）：HTML5 还提供了一系列传感器 API，如加速度计、陀螺仪、罗盘等，使得 Web 应用可以获取设备的物理传感器数据，用于游戏、导航、体感应用等。

4. 屏幕方向（Screen Orientation）：Screen Orientation API 允许 Web 应用检测用户设备的屏幕方向，从而根据设备的横竖屏状态来调整页面布局和显示方式。

5. 全屏显示（Full-Screen）：HTML5 引入了 Full-Screen API，允许 Web 应用以全屏模式运行，使得应用能够充分利用设备的屏幕空间。

通过这些设备访问的 API，HTML5 使得 Web 应用能够更好地融合到用户的硬件设备中，为开发者提供了更多创新的可能性，同时也为用户带来了更丰富、更便捷的使用体验。然而，出于安全考虑，浏览器通常会要求用户明确授权，才允许 Web 应用访问设备的功能。

1.Geolocation

HTML5 中的 Geolocation API 提供了以下几种方法：

1. getCurrentPosition
2. watchPosition
3. clearWatch

这三种方法均在 Secure Context 即 Https 的场景下才被允许（本地调试，可以使用 localhost 地址）。

const successCallback = (position) => {
  const { coords: { longitude, latitude, accuracy } } = position
  console.log('success', position, longitude, latitude, accuracy)
}
const watchCallback = (position) => {
  const { coords: { longitude, latitude } } = position
  console.log('watch', position, longitude, latitude)
}
const errorCallback = (error) => {
  console.error(error)
}
const options = {
  maximumAge: 0,
  timeout: Infinity,
  enablehighaccuracy: false
}

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)

const watchId = navigator.geolocation.watchPosition(watchCallback, errorCallback, options)

navigator.geolocation.clearWatch(watchId)

successCallback 中的 position 中会含有坐标点 coords 信息。

在 coords 中会包含 经度 longitude、纬度 longitude、精准度 accuracy（单位 meters，表示经纬度与实际地址可能差了多少米）。

errorCallback 通常在用户未授权或者不满足 Secure Context 的场景下会触发。譬如在 Chrome 浏览器下，打印 error，可能会是：

{
  code: 1,
  message: "Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).
}

options 可配置如下几种属性：

1. enableHighAccuracy（布尔值，默认值为 false）： 指定是否使用高精度位置信息。如果为 true，则 API 将尝试获取更精确的位置信息，通常使用 GPS。这可能会增加获取位置信息的时间和电池消耗。

2. timeout（毫秒，默认值为 Infinity）： 指定获取位置信息的最大等待时间。如果在指定的时间内无法获取位置信息，将触发错误回调。如果设为 Infinity，则表示没有超时限制。

3. maximumAge（毫秒，默认值为 0）： 指定允许使用的最大缓存位置的最大年龄。如果设置为 0，则表示不使用缓存的位置信息。

2.Media Devices

这部分功能可分为摄像、视频录制及重播以及拍照。

笔者在业务开发中封装了一套 media 库，可点击上面 Start Media 按钮，体验摄像以及拍照功能。

3.Sensors

目前，Sensor API 提供了以下几种传感器：

1. Accelerometer（加速度计传感器）： 用于测量设备在 X、Y 和 Z 轴上的加速度。

2. Gyroscope（陀螺仪传感器）： 用于测量设备的旋转速度。

3. Magnetometer（磁力计传感器）： 用于测量设备周围的磁场。

4. AmbientLightSensor（环境光传感器）： 用于测量周围环境的光照强度。

5. ProximitySensor（接近传感器）： 用于检测物体与设备的距离。

6. AbsoluteOrientationSensor（绝对方向传感器）： 用于获取设备的绝对方向，包括旋转、倾斜和方向。

譬如使用加速度计传感器 Accelerometer：

if ('Accelerometer' in window) {
  const accelerometer = new Accelerometer()
  accelerometer.addEventListener('reading', () => {
    console.log('Acceleration along X-axis: ' + accelerometer.x)
    console.log('Acceleration along Y-axis: ' + accelerometer.y)
    console.log('Acceleration along Z-axis: ' + accelerometer.z)
  })
  accelerometer.start()
} else {
  console.log('Accelerometer not supported')
}

4.Screen Orientation

Screen Orientation API

Screen Orientation 可以支持开发者在 Web 应用中判断横竖屏方向，进而兼容应用的实现方式。

相对于 Andriod，在 IOS 上，系统权限更加严格，因此 Screen Orientation 在实际应用中的兼容性并不乐观。

不过我们依然先总结下 Screen Orientation 的相关属性和 API。

目前官方推荐使用的相关属性和 API 有如下几种：

1. 一个属性
   • window.screen.orientation，包含如下属性 {angle: 0, type: 'landscape-primary', onchange: null}。
2. 两个方法
   • window.screen.orientation.lock(orientation) 锁定指定的屏幕方向
   • window.screen.orientation.unlock() 解锁方向
3. 一个事件
   • window.screen.orientation.addEventListener('change', callback)

然而实际上，以上属性和 API 的兼容性在 IOS 上均不理想。

因此可以选择 window 上的相关属性和事件监听：

if ('onorientationchange' in window) {
  window.addEventListener('orientationchange', () => {
    console.log('orientationchange')
  })
} else {
  if (window.orientation === 0 || window.orientation === 180) {
    // 竖屏
  } else {
    // 横屏
  }
}

关于更多横竖屏的检测与适配，可以参考文章：

• 移动设备强制横屏显示以及兼容问题

5.Full-Screen

Fullscreen API

1. 一个属性

   • document.fullscreenElement 标识是否存在全屏元素

2. 两个方法

   • fullscreenElement.requestFullscreen() 目标元素进行全屏
   • document.exitFullscreen() 文档退出全屏

3. 两个事件

   • fullscreenchange 全屏更改监听事件
   • fullscreenerror 全屏错误监听事件

另外，由于存在浏览器兼容性，因此在实际业务开发中，可以考虑使用screenfull第三方库。

点击下例中的 Toggle 按钮尝试：

核心 JS 代码如下：

const btn = document.querySelector('.toggle')
const targetElement = document.querySelector('.fullscreen-area')

btn.addEventListener('click', () => {
 // const targetElement = document.documentElement
 if (document.fullscreenElement) {
   document.exitFullscreen()
 } else {
   targetElement.requestFullscreen()
 }
})

document.addEventListener('fullscreenchange', e => {
 console.log('change', e)
})

document.addEventListener('fullscreenerror', e => {
 console.log('error', e)
})