javascript - 有没有办法在应用程序中切换前后摄像头
问题描述
我正在尝试开发一种 web-ar 体验,允许用户在整个体验中在前后摄像头之间切换,同时在使用后置摄像头时使用 SLAM/6dof。理想情况下,我想使用 PlayCanvas,但无法让前置摄像头工作。我在框架中实现了这一点取得了一些轻微的成功,但很多事情都在打破。
我找不到任何有关启用前置摄像头和使用 XR.stop() 的 PlayCanvas 特定文档,然后是 XR.run({canvas: document.getElementById('camerafeed'), cameraConfig: {direction: XR.XrConfig. camera().FRONT}}) 没有任何效果。
在一个框架内,我正在执行类似的事件序列,但我看到了一些结果。前置摄像头被激活,但日志中有错误,3D 对象不渲染(当我们在前置摄像头模式下启动时它们渲染),并且尝试再次切换摄像头显示“糟糕,出了点问题!” 屏幕。
至于切换 SLAM/6dof,我不断收到一个错误,即在 XR.run 执行后我无法更改 disableWorldTracking。即使我已经运行了 XR.stop 函数并监听了 stopxr 事件。
应该切换到前置摄像头的 A 帧功能(只是重要的部分):
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();
},
在场景运行时更改 disableWorldTracking 参数的正确方法是什么?场景运行时在前后摄像头之间切换的正确方法是什么?
解决方案
在与第 8 位墙开发人员交谈后,他们确认每个页面只支持一个 XR 会话,因此在 XR.stop 之后,XR.run 无法再次调用。然而,还有另一种在前后摄像头之间切换的方法,它可以在启用 SLAM 的情况下工作。
- 监听
onCameraStatusChange
事件并获取对stream
和video
元素的引用。 - 启动相机交换时,使用 暂停第 8 面墙
XR.pause()
。 - 停止
stream
您从第一步中抓取的所有曲目。 - 用于
navigator.mediaDevices.getUserMedia(constraints);
获取所需摄像机的流。 - 将新流分配给
video
您在步骤 1 中抓取的元素。 - 监听视频元素以触发
playing
事件,并调用XR.resume();
需要注意的一件事:SLAM 仅在您从后置摄像头开始时才有效。切换到前置摄像头和后置 SLAM 后将不再工作。
推荐阅读
- javascript - 防止在应用程序/网站之外播放视频文件
- javascript - 为什么在 componentDidMount 中无法访问 ReactJS 状态
- join - 批处理中的加入与减少
- elasticsearch - Kibana 不能在可视化中使用 number 类型的字段
- ios - 使用 FolioReaderKit 加载 epub 时出现问题
- swiftui - SwiftUI 标签栏颜色
- gdb - gdb mi 统一命令:-display-insert
- javascript - JS if( item === ? ) 语句未触发。比较问题
- javascript - 通过 redux 更改状态后如何更新 React 组件?
- excel - 使用 XMLHTTP 方法时等到页面加载完毕