実現したいこと
WebARでマーカーからスマホのブラウザカメラが外れても
映像や３Dオブジェクトを表示（映像なら再生も）し続けたいです。
発生している問題・エラーメッセージ
下記に提示したコードではマーカーにスマホのブラウザカメラを
かざすとマーカーを認識はするように作って見たのですが、
実践してみると映像は表示も再生もされず、そしてマーカーは
認識してるから一応、マーカーからブラウザカメラを外すと認識がなくなります。
該当のソースコード
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" /> <script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.1/dist/mindar-image-aframe.prod.js"></script> <script src="https://unpkg.com/aframe-chromakey-material/dist/aframe-chromakey-material.min.js"></script> <script> // グローバル変数でタイマーと状態を管理 let lockTimer = null; let isLocked = false; // A-Frameのカスタムコンポーネントを作成 AFRAME.registerComponent('markerhandler', { tick: function () { const entity = this.el; if (entity.object3D.visible) { // マーカーが見えている場合 if (lockTimer === null && !isLocked) { // タイマーがまだ開始されていない、かつロックされていない場合 lockTimer = setTimeout(() => { // 5秒後に映像をロック const arVideo = document.querySelector("#vid"); const normalVideo = document.querySelector("#normal-vid"); arVideo.pause(); normalVideo.src = "assets/asset.mp4"; normalVideo.play(); normalVideo.style.display = 'block'; // 通常のvideo要素を表示 isLocked = true; }, 5000); } } else { // マーカーが見えていない場合 if (!isLocked) { // まだロックされていない場合は、タイマーをクリア clearTimeout(lockTimer); lockTimer = null; } } } }); </script> <script> window.onload = function() { const loader = document.getElementById('loading--wrap'); loader.classList.add('completed'); loader.classList.add('content'); } AFRAME.registerComponent('markerhandler', { init: function() { const marker = this.el; const video = document.querySelector("#vid"); marker.addEventListener('targetFound', () => { // this.vid.muted = false; video.play(); document.getElementById("volume").style.display = "block"; }); marker.addEventListener('targetLost', () => { // this.vid.muted = true; video.pause(); // this.vid.currentTime = 0; document.getElementById("volume").style.display = "none"; }); } });; </script> <body style="margin: 0; overflow: hidden;"> <div id="loading--wrap"> <div class="loader"></div> <p>Loading...</p> </div> <a-scene mindar-image="imageTargetSrc:assets/marker.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false"> <a-assets> <video id="normal-vid" id="vid" src="assets/asset.mp4" preload="auto" crossorigin="anonymous" webkit-playsinline videohandler muted autoplay playsinline style="display:none" > </video> </a-assets> <a-entity mindar-image-target="targetIndex: 0" material="shader: chromakey; src: #vid; color: 0.1 0.9 0.2" geometry="primitive: plane; width: 2.0; height: 1.4" position="0 0 0" rotation="270 0 0" markerhandler smooth="true" smoothCount="10" smoothTolerance="0.01" smoothThreshold="5" raycaster="objects: .clickable" emitevents="true" cursor="fuse: false; rayOrigin: mouse;" autoplay="false"> </a-entity> <a-video id="independent-video" link="href: https://www.youtube.com/results?search_query=%E9%A2%A8%E9%96%93%E6%98%A5%E8%8F%9C;" src="#vid" width="2.6" height="1.4" position="0 0 0" rotation="270 0 0" play="true" class="clickable" autoplay="false" gesture-handler ></a-video> <a-camera position="0 0 0" look-controls="enabled: false"></a-camera> </a-scene> </body> </html>
すみません。試したことを記述するのを忘れてしまいました。
「試したこと」
<script> const arScene = document.getElementById('a-scene'); const independentVideo = document.getElementById('independent-video'); let isMarkerActive = false; let isVideoPlaying = false; arScene.addEventListener('targetfound', () => { isMarkerActive = true; if (!isVideoPlaying) { independentVideo.play(); isVideoPlaying = true; } }); arScene.addEventListener('targetlost', () => { isMarkerActive = false; // Do nothing, let the video continue playing }); // Optional: Stop the video if it ends independentVideo.addEventListener('ended', () => { isVideoPlaying = false; }); </script>
javascriptの部分をこちらに変えて試して見ましたが、こらもマーカーにカメラを
かざしてもマーカーは認識してるようなのですが映像は表示されず、
マーカーからカメラを外すとマーカーの認識がなくなります。
0 コメント