JavaScript可通过Web API访问摄像头、麦克风、传感器等硬件设备。首先需在安全上下文中运行，并获得用户授权。使用MediaDevices.getUserMedia()获取音视频流，可将摄像头画面显示在video元素中。通过Accelerometer或Gyroscope API读取设备运动数据，兼容性不足时可退回到DeviceMotionEvent。利用Geolocation API获取地理位置坐标，支持实时位置监听。此外，还可使用AmbientLightSensor检测光照、结合ZXing实现条码扫描、通过Web Bluetooth/USB连接外设，以及借助WebXR构建AR/VR应用。核心在于合理处理权限、安全限制与兼容性降级。
JavaScript 可以通过现代浏览器提供的 Web API 与设备硬件（如摄像头、麦克风、陀螺仪、加速度计等）进行交互。这些功能在移动设备和桌面浏览器中广泛支持，适用于构建实时音视频应用、体感交互、AR 场景等。
访问摄像头和麦克风
使用 MediaDevices.getUserMedia() 可请求用户授权并获取摄像头或麦克风的媒体流。
示例：打开摄像头并显示在页面上
const video = document.getElementById('video');
async function startCamera() {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: false // 可根据需要开启音频
});
video.srcObject = stream;
} catch (err) {
console.error("无法访问摄像头：", err);
}
}
startCamera();
HTML 中需包含 video 元素：
立即学习“Java免费学习笔记（深入）”；
注意：该操作必须在安全上下文（HTTPS 或 localhost）中运行，且用户需主动授权。
读取设备传感器（如加速度计、陀螺仪）
现代浏览器支持通过 Sensor APIs 获取设备运动和方向数据。常用传感器包括：
- Accelerometer：测量设备在三轴上的加速度
- Gyroscope：检测设备角速度
- DeviceMotionEvent：传统事件方式获取运动数据
示例：使用 Accelerometer API
if ('Accelerometer' in window) {
const sensor = new Accelerometer({ frequency: 60 });
sensor.addEventListener('reading', () => {
console.log(X: ${sensor.x}, Y: ${sensor.y}, Z: ${sensor.z});
});
sensor.start();
} else {
console.warn("当前设备或浏览器不支持 Accelerometer API");
}
兼容性较低时，可退回到 DeviceMotionEvent：
window.addEventListener('devicemotion', (e) => {
const x = e.acceleration.x;
const y = e.acceleration.y;
const z = e.acceleration.z;
console.log(`加速度 - X: ${x}, Y: ${y}, Z: ${z}`);
});
获取地理位置信息
通过 Geolocation API 获取设备当前坐标位置。
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
console.log(`当前位置：${latitude}, ${longitude}`);
},
(error) => {
console.error("定位失败：", error.message);
}
);
也可监听位置变化：
navigator.geolocation.watchPosition(updatePosition);
其他硬件交互能力
- 环境光线传感器：AmbientLightSensor 可读取周围光照强度（部分设备支持）
- 条码扫描：结合摄像头与 ZXing 等库实现二维码识别
- Web Bluetooth / WebUSB：实验性 API，允许连接蓝牙设备或 USB 外设（需用户手动选择设备）
- 增强现实（AR）：通过 WebXR API 访问 AR/VR 设备摄像头与空间追踪
基本上就这些。只要运行环境支持，JavaScript 能做的事比很多人想象中更强大。关键是理解权限机制、安全限制，并做好降级处理。
