如何使用ARJS和Aframe正确设置设备摄像头并解决偏移问题

强制指定后置主摄像头方案 #

针对默认选中超广角摄像头的问题，可通过手动筛选摄像头设备ID规避：

• 先通过getUserMedia接口枚举设备所有摄像头，筛选排除超广角对应设备，优先选择常规主摄像头：三星系列设备的超广角摄像头通常在设备label中带有ultra、wide-angle类标识，常规主摄像头排序多在后置摄像头的第二位
• 在AR.js初始化前将筛选出的主摄像头ID传入配置，示例代码：

// 枚举设备摄像头筛选主摄像头
navigator.mediaDevices.enumerateDevices()
.then(devices => {
  const videoDevices = devices.filter(d => d.kind === 'videoinput')
  const mainCamera = videoDevices.find(d => !d.label.toLowerCase().includes('ultra') && !d.label.toLowerCase().includes('wide')) || videoDevices[1]
  // 传入AR.js配置覆盖默认设备选择逻辑
  AFRAME.scenes[0].setAttribute('arjs', 'sourceWidth:1280; sourceHeight:720; deviceId:' + mainCamera.deviceId)
})

• 初始化时固定视频流的宽高参数，避免系统自动分配超广角对应的高分辨率参数，减少画面裁切导致的偏移

画面偏移校准方案 #

选对主摄像头后如果仍存在小范围左上偏移，可通过参数调整修正：

• 给AFrame的camera实体添加偏移属性，微调位置对齐原生相机画面，示例代码：

<a-camera position="0.1 0.15 0" rotation="0 0 0" arjs-camera></a-camera>

可根据实际偏移幅度调整position的x、y数值，向右偏移增大x值，向下偏移增大y值

• 调整AR.js识别区域参数，扩大识别范围适配偏移内容，将detectionArea参数从默认0.5调整到0.7-0.9区间即可：

AFRAME.scenes[0].setAttribute('arjs', 'detectionMode: mono_and_matrix; detectionArea: 0.8')

多设备通用兼容方案 #

• 可在应用首次启动时增加校准引导，让用户对准固定尺寸的标记物，自动计算偏移参数存入本地缓存，后续启动直接套用
• 针对三星、华为等多摄机型做单独设备型号匹配，启动时直接跳过超广角、微距等特殊用途摄像头，优先加载常规主摄像头

内容的提问来源于stack exchange，提问作者Pablo Darde