有没有办法在应用程序中切换前后摄像头

Question

我正在尝试开发一种 web-ar 体验，允许用户在整个体验过程中在前后摄像头之间切换，同时在使用后置摄像头的同时利用 SLAM/6dof。理想情况下，我想使用 PlayCanvas，但无法让前置摄像头工作。我在 a-frame 中实现了一些小的成功，但很多东西都坏了。

我找不到任何有关启用前置摄像头和使用 XR.stop() 的 PlayCanvas 特定文档，然后是 XR.run({canvas: document.getElementById ('camerafeed'), cameraConfig: {direction: XR.XrConfig.camera().FRONT}}) 没有任何效果。

在一个框架内，我正在执行类似的事件序列，但我看到了一些结果。前置摄像头被激活，但日志中有错误，3D 对象不渲染（当我们以前置摄像头模式启动时它们会渲染），再次尝试切换摄像头会显示 "Oops, something went wrong!" 屏幕。

至于切换 SLAM/6dof 我一直收到一个错误，在执行 XR.run 后我无法更改 disableWorldTracking。即使我有运行 XR.stop 函数并监听了 stopxr 事件。

应该切换到前置摄像头的框架功能（只是重要的位）：

init: function() {
this.el.sceneEl.addEventListener('stopxr', event => {
      console.log("AR has been stopped.");
      const videoCanvas = document.querySelector('canvas.a-canvas');
      XR.XrController.configure({disableWorldTracking: true});
      XR.run({canvas: videoCanvas, cameraConfig: {direction: XR.XrConfig.camera().FRONT}});
    });
},

switchToFace: function() {
    this.el.sceneEl.emit('stopxr');
    //XR.stop();
  },

当场景运行ning 时，更改 disableWorldTracking 参数的正确方法是什么？当场景运行ning 时，在前后摄像头之间切换的正确方法是什么？

Answer 1

在与 8th wall 开发人员交谈后，他们确认他们每页仅支持一个 XR 会话，因此在 XR.stop 之后，无法再次调用 XR.run。然而，还有另一种方式可以在前后摄像头之间切换，并且它可以在启用 SLAM 的情况下使用。

监听 onCameraStatusChange 事件并获取对 stream 和 video 元素的引用。
启动相机交换时，使用 XR.pause().
停止您从第一步抓取的 stream 中的所有曲目。
使用 navigator.mediaDevices.getUserMedia(constraints); 获取所需相机的流。
将新流分配给您在第 1 步中获取的 video 元素。
侦听视频元素以触发 playing 事件，然后调用 XR.resume();

需要注意的一件事：SLAM 仅在您从后置摄像头开始时才有效。切换到前置摄像头后，后置SLAM将不再有效

Answer 2

现在可以停止和恢复 XR 会话（从前一段时间的 13.1 版本开始）。您可以调用 XR8.stop()，然后调用 XR8.run() 并传入新的所需相机方向。

如果您在 AFrame 项目中使用 8th Wall，您只需从 <a-scene> 中删除 xrweb 组件以停止 XR，然后将其添加回来（使用新的 cameraDirection 参数，如果需要的话）重新启动。

以下是一些演示如何翻转相机方向的项目：

https://www.8thwall.com/8thwall/camera-shaders

https://www.8thwall.com/playground/swap-dof

有没有办法在应用程序中切换前后摄像头

Is there a way to switch between front and back cameras mid application

javascript

augmented-reality

aframe

playcanvas

8thwall-web