Video doesn't stay aligned with ImageMarker when moving device after image detection in AR

[anxheloo]

Hi team, thank you for the amazing library! I’m building an AR app using react-viro where I want to display a video over a detected image marker.

What I want: When the AR camera detects an image (e.g. targetOne), it should anchor a video over that image. The video should stay correctly aligned inside the image, even if the user moves their device (closer, further, or changes angle). If the user then scans another image (e.g. targetTwo), the video for targetOne should disappear, and the video for targetTwo should appear in its place.

Current issue: When an image is detected and the video starts playing, the video shows correctly. But if the user moves the phone, the video does not stay locked or aligned to the image. It moves a little and try to readjust itself inside the Image but not staying there attached on all scenarios: moving left, right, up, down, far, near.

Additionally, old videos don't disappear when a new image is scanned.

This is my code :

const ArScene = () => { const videoPath = require('../../../../assets/videos/video1.mp4'); const videoPath2 = require('../../../../assets/videos/video2.mp4');

ViroARTrackingTargets.createTargets({ targetOne: { source: require('../../../../assets/images/ARImages/arImage.jpg'), orientation: 'Up', physicalWidth: 0.1, // meters physicalHeight: 0.1, type: 'Image', }, targetTwo: { source: require('../../../../assets/images/ARImages/arImage2.webp'), orientation: 'Up', physicalWidth: 0.1, // meters physicalHeight: 0.1, type: 'Image', }, });

const handleAnchorFound = () => { console.log('Marker detected'); };

const handleAnchorRemoved = () => { console.log('Marker lost'); };

return ( <ViroARScene> <ViroARImageMarker target="targetOne" onAnchorFound={handleAnchorFound} onAnchorRemoved={handleAnchorRemoved} > <ViroNode rotation={[-90, 0, 0]}> <ViroVideo source={videoPath} height={0.1 * (4 / 3)} width={0.1} position={[0, 0, 0]} scale={[1, 1, 1]} loop={true} muted={false} volume={1} visible={true} /> </ViroNode> </ViroARImageMarker>

  <ViroARImageMarker
    target="targetTwo"
    onAnchorFound={handleAnchorFound}
    onAnchorRemoved={handleAnchorRemoved}
  >
    <ViroNode rotation={[-90, 0, 0]}>
      <ViroVideo
        source={videoPath2}
        width={0.1}
        height={0.1}
        position={[0, 0, 0]}
        scale={[1, 1, 1]}
        loop={true}
        muted={false}
        volume={1}
        visible={true}
      />
    </ViroNode>
  </ViroARImageMarker>
</ViroARScene>

); };

Thanks in advance!