Ar.js image tracking NFT - Error in loading marker on Worker 403

Question

I'm trying the Image Tracking example as explained here - https://github.com/AR-js-org/AR.js#get-started I've replaced the image and video with my own and added the whole project in an Amazon S3 bucket. When I run the html page, I get an error in the browser console "Error in loading marker on Worker 403". I'm assuming this indicates that the NFT image is somehow not loading. There are no CORS errors, or any other unauthorized errors indicated in the console.

Things I've tried after going through some pages on stack overflow (but they didn't help)-

Initially the image I was using was very basic, so I changed to the Pinball image so that AR.js gets more descriptions.
Disabled my chrome extensions like Ad Blocker etc.

Can someone help me with what is wrong or missing for the NFT to load properly?

Here's my code -

    <script 
   src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

<style>
  .arjs-loader {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .arjs-loader div {
    text-align: center;
    font-size: 1.25em;
    color: white;
  }
</style>

<body style="margin : 0px; overflow: hidden;">
  <!-- minimal loader shown until image descriptors are loaded -->
  <div class="arjs-loader">
    <div>Loading, please wait...</div>
  </div>
  <a-scene
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
  >
    <!-- we use cors proxy to avoid cross-origin problems -->
    <a-nft
      type="nft"
      url="https://ar-js-image-tracking-1.s3.ap-south-1.amazonaws.com/ar-js-image-tracking-1/images/pinball.jpg"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
      <a-entity
        gltf-model="https://ar-js-image-tracking-1.s3.ap-south-1.amazonaws.com/ar-js-image-tracking-1/images/video1.mp4"
        scale="5 5 5"
        position="50 150 0"
      >
      </a-entity>
    </a-nft>
    <a-entity camera></a-entity>
  </a-scene>
</body>

UPDATE: I've changed my code to use an nft merker and a-video. But I'm still getting the same error. Here's the updated code:

<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

<style>
  .arjs-loader {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .arjs-loader div {
    text-align: center;
    font-size: 1.25em;
    color: white;
  }
</style>

<body style="margin : 0px; overflow: hidden;">
  <!-- minimal loader shown until image descriptors are loaded -->
  <div class="arjs-loader">
    <div>Loading, please wait...</div>
  </div>
  <a-scene
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
  >
    <!-- we use cors proxy to avoid cross-origin problems -->
    <a-nft
      type="nft"
      url="https://d2a3azuonia3td.cloudfront.net/ar-js-image-tracking-1/images/peacock-nft/peacock"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
      <a-video
        src="https://d2a3azuonia3td.cloudfront.net/ar-js-image-tracking-1/images/video1.mp4"
        width="9"
        height="9"
        position="50 150 0"
      >
      </a-video>
    </a-nft>
    <a-entity camera></a-entity>
  </a-scene>
</body>

UPDATE2 - @Kalwalt's solution resolved my issue. Additionally, turns out the my old html file was still cached in Cloudfront. I had to invalidate that file so that the newer version is pulled from S3 bucket.

kalwalt kalwalt · Accepted Answer · 2020-04-07T23:20:41

The NFT Natural Feature Tracking use "descriptors" to track a desired image. To accomplish this you need to create your own descriptors, that is a NFT marker, you have two choices:

with the online tool carnaux.github.io/NFT-Marker-Creator/ easier to do but slower
the nodejs app but you need to download or clone the repository

Follow the instructions in the Readme or my tutorial.

You are getting that error "Error in loading marker on Worker 403". because you are trying to use a jpg image as NFT marker and this is not allowed.

Moreover you are trying to load a video instead of a gltf model. If you want to load a video you should use <a-video> primitive. For the gltf supply a gltf model with extension .gltf or .glb.

Ar.js image tracking NFT - Error in loading marker on Worker 403

2 Answers