dvbridges
commented
1 year ago Hi, I recently found a solution here, I've updated your code below.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes">
<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>
</head>
<script>
AFRAME.registerComponent("video-controller", {
init: function () {
const target = document.getElementById("target");
const btn = document.querySelector("button");
const video = document.getElementById("myVideo");
// detect target found
target.addEventListener("targetFound", event => {
console.log("target found");
this.found = true;
video.play();
});
// detect target lost
target.addEventListener("targetLost", event => {
console.log("target lost");
this.found = false
video.pause();
});
// detect click event
btn.addEventListener("click", event => {
console.log("btn click");
if (this.found)
video.play();
});
}
})
</script>
<body>
<div style="position: fixed; top: 10px; width: 100%; text-align: center; z-index: 1; color: grey">
<button>Play video</button> - if the plane is black on mobile.
</div>
<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-assets>
<video id="myVideo" src="https://cdn.glitch.global/aac91519-95ff-4996-8909-e5c41f3cfff9/mov_bbb.mp4?v=1680745936939" preload loop></video>
</a-assets>
<a-entity mindar-image-target="targetIndex: 0" id="target">
<a-plane class="clickable" material="src: #myVideo; opacity: 0.5; transparent: true" video-controller>
</a-plane>
</a-entity>
</a-scene>
</body>
</html>
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: