How to correctly display video on the MindAR Target #375

arlifephoto · 2023-04-06T16:22:15Z

arlifephoto
Apr 6, 2023

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" />
    <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>
  <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-assets>
        <video id="myVideo" src="https://cdn.glitch.global/aac91519-95ff-4996-8909-e5c41f3cfff9/mov_bbb.mp4?v=1680745936939" preload autoplay loop></video>
      </a-assets>
      <a-entity mindar-image-target="targetIndex: 0" id="target">
        <a-video src="#myVideo" position="0 0 0" height="1" width="1" rotation="0 0 0" id="vid" ></a-video>
      </a-entity>
    </a-scene>
   
  </body>
</html>

ZhilinAR · 2024-01-05T08:42:41Z

ZhilinAR
Jan 5, 2024

Hello! Please tell me, have you found a solution to this problem?

0 replies

Sergey55rex · 2024-01-07T18:18:27Z

Sergey55rex
Jan 7, 2024

https://hiukim.github.io/mind-ar-js-doc/examples/events-handling

0 replies

vxedit · 2024-03-22T09:09:14Z

vxedit
Mar 22, 2024

`

AFRAME.registerComponent('mytarget', {
    init: function () {
      this.el.addEventListener('targetFound', event => {
        console.log("target found");
        show();
      });
      this.el.addEventListener('targetLost', event => {
        console.log("target found");
      });
    }
  });

</script>

<a-scene mindar-image="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.2/examples/image-tracking/assets/card-example/card.mind; showStats: false; uiScanning: #example-scanning-overlay;" embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
    <a-assets>
    
    <video id="video" autoplay loop="true" src="./output.webm"></video>
</a-assets>

  <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

    <a-entity id="mytarget" mytarget mindar-image-target="targetIndex: 0">
        <a-video src="#video" position="0 0 0" rotation="0 0 0" width="1.0" height="0.6"></a-video>
    </a-entity>
</a-scene>

` @arlifephoto @ZhilinAR

to autoplay a video it is preferable to have the video format as .webm
you have to make an event listener which will check if the target is found or not if the target is found it will play the video by applying .play method over the target video

you can replay me if you are getting any error.

5 replies

iMpAviD0 Apr 2, 2024

@vxedit
Hey I tried your solution, but if I scan the picture I get a black card.
Tested it with your video as well with my, both in .webm

Any solution?

vxedit Apr 4, 2024

Describe it in more detail , and if possible give a link for your code or paste it here .

iMpAviD0 Apr 10, 2024

<script src="https://aframe.io/releases/1.5.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> const show = () => { document.querySelector("#video").play(); }

AFRAME.registerComponent('mytarget', {
    init: function () {
      this.el.addEventListener('targetFound', event => {
        console.log("target found");
        show();
      });
      this.el.addEventListener('targetLost', event => {
        console.log("target found");
      });
    }
  });
</script>

<a-scene mindar-image="imageTargetSrc: https://myexample-homepage/artest/card.mind; showStats: false; uiScanning: #example-scanning-overlay;" embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
  <a-assets>
  
  <video id="video" autoplay="true" loop="true" src="https://myexample-homepage/artest/videotest.webm"></video>
</a-assets>

<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

  <a-entity id="mytarget" mytarget mindar-image-target="targetIndex: 0">
      <a-video src="#video" position="0 0 0" rotation="0 0 0" width="1.0" height="0.6"></a-video>
  </a-entity>
</a-scene>

All paths are correct and were adapted for this article, so this cannot be the error.
The web browser console does not give any errors.

vxedit Apr 14, 2024

did you make a python server to make this work by entering the command ,
py -m http.server 8080
8080 is port number , and can be anything .
check if your javascript is outside of body , insert some console.log message to check which part is working ,

AFRAME.registerComponent('mytarget', {
init: function () {
this.el.addEventListener('targetFound', event => {
console.log("target found")
document.querySelector("#video").play();
})
this.el.addEventListener('targetLost', event => {
console.log("target lost")
document.querySelector("#video").pause();
})
}
});

if nothing is working you can try adding that video on a-plane and use another video for its audio effect , by this you can also use mp4 with it , i have used chromakey as material for removing green screen ,

<script src="https://unpkg.com/aframe-chromakey-material/dist/aframe-chromakey-material.min.js"></script>

    <a-scene mindar-image="imageTargetSrc: ./targets.mind; showStats: false; uiScanning: #example-scanning-overlay;" embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
    <a-assets>
        <img id="icon-web" src="./assets/card-example/icons/web.png" />
        <!-- <video id="video" loop="true" src="./output.webm"></video> -->
        <video style="opacity: 0;" id="video" src="./Dancing.mp4" loop autoplay muted></video>
        <video style="opacity: 0;" id="vid" src="./Dancing.mp4" loop autoplay></video>
    </a-assets>

    <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

    <a-entity id="mytarget" mytarget mindar-image-target="targetIndex: 0">
        <a-text value="" id="text-en" color="purple" align="center" width="2" position="0 0.4 0"
        animation="property: position; to: 0 0.5 0; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate"
        ></a-text>
        <a-video src="#vid" position="0 0 0.2" rotation="0 0 0" width="0.0" height="0.0"></a-video>
        <!-- <a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane> -->
        <a-plane 
        id="dan-plane"
        material="
        shader: chromakey; 
        src: #video; 
        color: 0.1 0.9 0.2" 
        position="0 0 -1" 
        scale="1.3 1.3 1.3"
        rotation="80 0 0"
        
      ></a-plane>    
        
    </a-entity>
</a-scene>

iMpAviD0 Apr 17, 2024

Thank you very much, everything worked great. I just re-wrote everything, I probably forgot something or wrote it wrong.

valinerosgordov · 2024-08-13T03:41:26Z

valinerosgordov
Aug 13, 2024

Hello, i have nearly identical issue, but couldn't fix it. When I trigger on image target, the video pop up but doesnt play automaticly as I need, same for the background sound, i tried to convert video to gif and it's also doesnt play. Any suggestions?

That's my HTML

`

<title>KontiARApp</title>

0+

    <a-entity mindar-image-target="targetIndex: 0">
        <a-plane src="#myGif" position="0 0 0.1" height="0.7" width="0.7"></a-plane>
    </a-entity>
    
    <a-entity sound="src: #backgroundMusic;" position="0 0 0"></a-entity> 
</a-scene>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>
<script src="app.js"></script>

`

That's my CSS

`#loadingOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 1);
z-index: 1000;
font-size: 3em;
}

#loadingOverlay.hidden {
display: none;
}

a-scene {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}`

That's my JS

`
window.addEventListener('load', () => {
const sceneEl = document.querySelector('a-scene');
const backgroundMusic = document.getElementById('backgroundMusic');
const loadingOverlay = document.getElementById('loadingOverlay');
const myGif = document.getElementById('myGif'); // Get the GIF element

// Hide overlay after 8 seconds 
setTimeout(() => {
    loadingOverlay.classList.add('hidden');
}, 8000); 

sceneEl.addEventListener('mindARImageTrackingInitialized', () => {
    console.log('Mind AR is ready!');

    // Play background music
    backgroundMusic.play();

    // Hide the overlay 
    loadingOverlay.classList.add('hidden'); 

    // Ensure GIF is visible (if you were hiding it initially)
    myGif.style.display = 'block'; 
});

}); `

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to correctly display video on the MindAR Target #375

{{title}}

Replies: 4 comments 5 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How to correctly display video on the MindAR Target #375

Replies: 4 comments · 5 replies

Replies: 4 comments 5 replies