2024年末移动端Wasm应用拍摄图片的深度图获取方法咨询

截至2024年末，你可以通过以下HTML5生态内的方案在移动端Wasm应用中获取拍摄图片的深度图，避开原生开发和非Web标准的Depth API：

1. WebXR Depth Sensing API（硬件级深度获取） #

如果目标设备配备LiDAR或双目深度摄像头（如iPhone 12+、部分安卓旗舰），且使用支持WebXR的移动端浏览器（如Chrome Android、Safari 16+），可通过WebXR Depth Sensing API直接获取场景深度数据，Wasm可直接调用这些Web API拿到深度信息并映射到拍摄的图片帧上。

核心步骤：

• 初始化WebXR AR会话时，配置depthSensing选项指定深度数据格式；
• 在每一帧的回调中，从XRFrame获取深度信息；
• 将深度数据传递给Wasm进行后续处理（如匹配拍摄图片的像素坐标生成对应深度图）。

示例代码片段：

// 初始化WebXR会话
const session = await navigator.xr.requestSession('immersive-ar', {
  requiredFeatures: ['depth-sensing'],
  depthSensing: {
    usagePreference: ['cpu-optimized'],
    formatPreference: ['luminance-alpha']
  }
});

// 帧回调中获取深度数据
session.requestAnimationFrame((time, frame) => {
  const depthInfo = frame.getDepthInformation(session.renderer.referenceSpace);
  if (depthInfo) {
    // 将depthInfo的深度纹理数据传给Wasm处理
    const depthData = new Uint8Array(depthInfo.data);
    wasmModule.processDepthData(depthData, depthInfo.width, depthInfo.height);
  }
});

2. 单目深度估计（纯软件方案） #

如果设备不支持硬件深度传感器，可通过HTML5获取摄像头视频流，再在Wasm中运行预训练的单目深度估计模型（如MobileNetDepth、DenseDepth）来生成深度图。这种方案无需硬件支持，兼容性更广，但精度和实时性依赖设备性能。

核心步骤：

• 使用navigator.mediaDevices.getUserMedia获取摄像头的视频流；
• 将每一帧的图像数据（通过Canvas提取像素）传递给Wasm；
• 在Wasm中加载预训练的深度估计模型，运行推理得到对应帧的深度图。

示例代码片段：

// 获取摄像头流
const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
const video = document.createElement('video');
video.srcObject = stream;
await video.play();

// 提取帧数据传给Wasm
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
setInterval(() => {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  ctx.drawImage(video, 0, 0);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  // 将图像数据传给Wasm处理
  wasmModule.generateDepthMap(imageData.data, canvas.width, canvas.height);
}, 100);

注意事项 #

• WebXR Depth Sensing仅支持部分高端设备和现代浏览器，需提前做兼容性检测；
• 单目深度估计模型需提前编译为Wasm兼容格式（如使用TensorFlow Lite for Web）；
• Wasm处理图像和深度数据时，注意优化内存拷贝逻辑，避免性能损耗。

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