React-Viro AR ImageTracking sub elements are positioned inside camera when target is seen

Question

I am currently using Viro-React (React-Viro) for a AR project in which, if a certain pictures gets seen by the camera a video is played infront of it. I had it working perfectly, but somehow and a few days later, without changing the code, the video and everything inside the ViroARImageMarker is always positioned inside the camera, when the target gets seen.

This behavior only seems to happen in my own projects and not in the samples provided by Viro Media.

I have tried to:

• Reinstalling node modules
• Compared the package.json's and reinstalled.
• Changed the position of the elements inside the ViroARImageMarker
• And reorganised the elements.

But nothing seems to work.

As I said the code itself shows and hides the video, but does not position the video (every inside the ViroARImageMarker correctly, but positions them in the position of the camera when the targets gets seen and then keeps them there.

Here is the code. (Snippet at the end) I pass this function to the ViroARSceneNavigator in another script.

There are a few animations, which just scale up/down the video depending if the target is in view or not.

(I removed the whitespaces to fit more onto one screen)

Main Code

Viro Animations and Material

 

   "use strict";

import React, { useState } from "react";
import { ViroARScene, ViroNode, ViroARImageMarker, ViroVideo, ViroARTrackingTargets, ViroAnimations, ViroMaterials } from "react-viro";

const MainScene = (props) => {
    const videoPath = require("./res/Test_Video.mp4");
    const [playVideoAnimation, setPlayVideoAnimation] = useState(false);
    const [videoAnimationName, setVideoAnimationString] = useState("showVideo");
    const [shouldPlayVideo, setShouldPlayVideo] = useState(false);

    function onAnchorFound() {
        setPlayVideoAnimation(true);
        setVideoAnimationString("showVideo");
        setShouldPlayVideo(true);
    }

    function onAnchorRemoved() {
        setShouldPlayVideo(false);
        setVideoAnimationString("closeVideo");
        setPlayVideoAnimation(true);
    }

    function onVideoAnimationFinish() {
        setPlayVideoAnimation(false);
    }

    function onVideoFinish() {
        setShouldPlayVideo(false);
        setVideoAnimationString("closeVideo");
        setPlayVideoAnimation(true);
    }
    
    return (
        <ViroARScene>
            <ViroARImageMarker target={"targetOne"} onAnchorFound={onAnchorFound} onAnchorRemoved={onAnchorRemoved}>
                <ViroNode rotation={[-90, 0, 0]}>
                    <ViroVideo
                        position={[0, 0, 0]}
                        scale={[0, 0, 0]}
                        dragType="FixedToWorld"
                        animation={{ name: videoAnimationName, run: playVideoAnimation, onFinish: onVideoAnimationFinish }}
                        source={videoPath}
                        materials={["chromaKeyFilteredVideo"]}
                        height={0.2 * (9 / 16)}
                        width={0.2}
                        paused={!shouldPlayVideo}
                        onFinish={onVideoFinish}
                    />
                </ViroNode>
            </ViroARImageMarker>
        </ViroARScene>
    );
};

ViroAnimations.registerAnimations({
    showVideo: {
        properties: { scaleX: 0.9, scaleY: 0.9, scaleZ: 0.9 },
        duration: 1,
        easing: "bounce",
    },
    closeVideo: {
        properties: { scaleX: 0, scaleY: 0, scaleZ: 0 },
        duration: 1,
    },
});

ViroMaterials.createMaterials({
    chromaKeyFilteredVideo: {
        chromaKeyFilteringColor: "#00FF00",
    },
});

ViroARTrackingTargets.createTargets({
    targetOne: {
        source: require("./res/Test_Bild.png"),
        orientation: "Up",
        physicalWidth: 0.01, // real world width in meters
    },
});

export default MainScene;

Answer 1

I was able to resolve the issue by copying (downgrading) my dependencies in my package.json from the React-Viro codesamples and decreasing the width/height (inside the element) and scale (in the animation) of the video.

Note that if the sub element of the ViroARImageMarker is too big (in scale and size), the issue comes back.