Please help me. I can't get the video to display properly on the MindAR Target. It turns out that the video (and sound from the video) starts before the camera finds the target. How to make video start ONLY when camera finds target, and when camera loses target - video pauses. Also, I need it to be displayed correctly on Android and IOS.
Here's my code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://aframe.io/releases/1.3.0/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://cdn.rawgit.com/mayognaise/aframe-chromakey-material/v1.2.0/dist/aframe-chromakey-material.min.js"></script>
</head>
<body>
<a-scene mindar-image="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.1/examples/image-tracking/assets/card-example/card.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
<a-entity mindar-image-target="targetIndex: 0">
<a-video src="https://cdn.glitch.global/aac91519-95ff-4996-8909-e5c41f3cfff9/mov_bbb.mp4?v=1680745936939" position="0 0 0" height="1" width="1" rotation="0 0 0" id="vid"></a-video>
</a-entity>
</a-scene>
</body>
</html>
