Javascript 接受相机前显示的AR.JS HTML内容
我有一个AR.JS设置，我正在使用一个aframe html着色器插件将html作为纹理渲染到我的平面上。我有一个问题，当我在接受摄像头权限之前加载视图时，我可以看到HTML代码，当我接受摄像头权限时，摄像头加载，我无法再看到它，直到我使用使用HTML的AR标记，然后它才正确显示。我有办法解决这个问题吗？我一直在想，在接受相机之前，可能会一直听，然后显示html，否则就隐藏它（然后它将永远不会显示），但我不知道如何才能做到这一点，或者如果可能的话 有什么解决办法吗 谢谢Javascript 接受相机前显示的AR.JS HTML内容,javascript,html,three.js,aframe,ar.js,Javascript,Html,Three.js,Aframe,Ar.js,我有一个AR.JS设置，我正在使用一个aframe html着色器插件将html作为纹理渲染到我的平面上。我有一个问题，当我在接受摄像头权限之前加载视图时，我可以看到HTML代码，当我接受摄像头权限时，摄像头加载，我无法再看到它，直到我使用使用HTML的AR标记，然后它才正确显示。我有办法解决这个问题吗？我一直在想，在接受相机之前，可能会一直听，然后显示html，否则就隐藏它（然后它将永远不会显示），但我不知道如何才能做到这一点，或者如果可能的话 有什么解决办法吗 谢谢 <!-- incl
<!-- include a-frame -->
<script src="vendor/aframe/build/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-html-shader@0.2.0/dist/aframe-html-shader.min.js"></script>
<!-- include ar.js for aframe -->
<script src='../build/aframe-ar.js'></script>
<script>ARjs.Context.baseURL = '../../three.js/'</script>
<script>document.addEventListener('click', evt => document.querySelector('video').play());
</script>
<!-- start the body of your page -->
<body style='margin : 0px; overflow: hidden;'>
<!-- add some info at the top of the page -->
<div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1; color:white; font-size:30px;'>
<a>Prototype ALL</a>
</div>
<!-- Define your 3d scene and enabled ar.js -->
<a-scene embedded arjs='sourceType: webcam; detectionMode: mono; trackingMethod: best; debugUIEnabled: false;'>
<a-assets>
<video id="video" autoplay loop="true" src="video.mp4"> </video>
</a-assets>
<!-- Create a anchor to attach your augmented reality -->
<a-marker preset='custom' type='pattern' url='qrvideo.patt'>
<a-video src="#video" width="1.8" height="1" rotation="270 0 0"> </a-video>
</a-marker>
<a-marker preset='custom' type='pattern' url='qrcode.patt'>
<a-entity geometry="primitive: plane; width: 2; height: 0.5" rotation="-90 0 0" material="shader: html; target: #htmlElement"></a-entity>
</a-marker>
<!-- add marker here -->
<!-- Define a static camera -->
<a-entity camera></a-entity>
</a-scene>
<!-- custom html rendering -->
<div style="width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -2; overflow: hidden">
<div id="htmlElement" style="background: #F8F8F8; color: #333; font-size: 48px">testing1</div>
</div>
</body>
ARjs.Context.baseURL='../../three.js/'
document.addEventListener（'click'，evt=>document.querySelector（'video'）.play（））；
原型全部
测试1