"arjs-video-loaded" event can be fired before tokens have setup the event callback for it

[wardinsky]

Do you want to request a feature or report a bug? Report a bug

What is the current behavior? After initializing the camera, it's possible for the "arjs-video-loaded" event to fire before the NFT tokens are loaded into memory. This means that the NFTs will never get that event callback and never load.

If the current behavior is a bug, please provide the steps to reproduce. Add a custom NFT image market to a site and refresh a large number of times until the camera initializes before the webtokens do.

Please mention other relevant information such as the browser version, Operating System and Device Name Works pretty well on Chrome in Windows 11, but still happens 1/3 times in my case. On iPhone 12 Pro, this happens about 4/5 times.

What is the expected behavior? The tokens should be setup before the camera initialization should start, or at least setup the event callback.

If this is a feature request, what is motivation or use case for changing the behavior?

Here is code I add to my own javascript page to constantly update every 1 second if this happens.

   // retry timer
        let initialized = false;
        let reloadTimer;

        window.addEventListener('arjs-video-loaded', function () {
            if (initialized)
                return;
            initialized = true;
            
            reloadTimer = setInterval(function () {
                window.dispatchEvent(new CustomEvent('arjs-video-loaded', {
                    detail: {
                        component: document.querySelector('#arjs-video'),
                    },
                }));
            }, 1000);
        });
        window.addEventListener("arjs-nft-loaded", function () {
            initialized = true;
            clearInterval(reloadTimer);
        });
       

[daryllstrauss]

This was quite helpful. The first NFT demo from the README would hang with the "Loading, please wait..." message before I added this code.