Skip to content

Changing between ViroARImageMarker #160

Open
@leandro2219

Description

@leandro2219

Environment:

  1. Development OS: Windows,
  2. Device OS & Version: Android (8.0 and 11.0)
  3. Version:
    "@viro-community/react-viro": "^2.20.2",
    "react": "17.0.2",
    "react-native": "0.65.1"
  4. Device(s): Nexus 6P and Motorola Edge30

Description
Hi, We are creating an App which people can use it on our magazine, pointing to some areas and hearing some sound, viewing videos and viewing 3dObject.
My problem is when I point to the first ViroARImageMarker I can see the video, then I point to the second ViroARImageMarker and I can see a 3dObject + Sound and the video disappears (this is perfect), but when I tried to go back to the video I can't see it, I have to move my cell phone from the magazine from a while and then point again to see the video again (and sometimes does not work).
Same problem if I start with the sound and go to the video.

Next is a example code to reproduce it (is not the same but the problem is)

Thanks.

Reproducible Demo
`
import React, {useState} from 'react';
import {ViroARScene, ViroARSceneNavigator, Viro3DObject, ViroAmbientLight, ViroARTrackingTargets, ViroARImageMarker, ViroVideo, ViroNode, ViroSound, ViroImage} from '@viro-community/react-viro';

const MagazineSceneAR = () => {
const [actualModal, setActualModal] = useState(null);
const [initSound, setInitSound] = useState(true);
const [pauseUpdates, setPauseUpdates] = useState(false);

ViroARTrackingTargets.createTargets({
sn1 : {
source : {uri : 'https://www.revistalagunas.com/app/assets/1/tapa/tapa-1.jpg'},
orientation : 'Up',
physicalWidth : 0.21
},
vd1 : {
source : {uri : 'https://www.revistalagunas.com/app/assets/1/portada/portada.jpg'},
orientation : 'Up',
physicalWidth : 0.1224
}
})

function onInitialized(state, reason) {}

function _onAnchorFound(objId) {
console.log(objId, actualModal);
if (actualModal !== objId) {
console.log('Changing to ' + objId);
setActualModal(objId);
setPauseUpdates(false);
}
}

function _startLoadingImg(){
setInitSound(true);
}

function _endLoadingImg(){
setInitSound(false);
setPauseUpdates(true);
}

return (


<ViroARImageMarker target={'sn1'} key={"targ-sn1"} onAnchorFound={(e) => _onAnchorFound('sn1')} pauseUpdates={pauseUpdates}>
{actualModal == 'sn1' ?

<ViroSound source={{uri : 'https://www.revistalagunas.com/app/assets/1/tapa/sonido.wav'}} paused={initSound} />

          <Viro3DObject
              source={require('./src/joe/Joe.vrx')}
              resources={[
                      require('./src/joe/50b772da-ec7a-4070-9245-22985d6d1ee9_image.png'),
                      require('./src/joe/6866fa54-c546-43c8-a98d-e61f5e545a5a_image.png')]}
              type="VRX"
              scale={[0.00001, 0.00001, 0.00001]}
              rotation={[90, 0, 0]}
              onLoadStart={() => _startLoadingImg('sn1')}
              onLoadEnd={() => _endLoadingImg('sn1')}
          />              
      </ViroNode>
  : null}
  </ViroARImageMarker >

  <ViroARImageMarker target={'vd1'} key={"targ-vd1"} onAnchorFound={(e) => _onAnchorFound('vd1')} pauseUpdates={pauseUpdates}>
    {actualModal == 'vd1' ? 
        <ViroNode>
            <ViroVideo 
                source={{uri : 'https://www.revistalagunas.com/app/assets/1/portada/portada.mp4'}} 
                loop={true} 
                scale={[0.4,0.4,0.4]}
                rotation={[-50, 0, 0]}
                width={0.406}
                height={0.720}
            />
        </ViroNode>
    : null}
</ViroARImageMarker >
</ViroARScene>

);
};

export default () => {
return (
<ViroARSceneNavigator
autofocus={true}
initialScene={{
scene: MagazineSceneAR,
}}
style={{flex: 1}}
/>
);
};
`

Metadata

Metadata

Assignees

No one assigned

    Labels

    AndroidAffects google devices running AndroidbugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions