title: Ar.js image tracking NFT - Error in loading marker on Worker 403
body: <p>I'm trying the Image Tracking example as explained here - <a href="https://github.com/AR-js-org/AR.js#get-started" rel="nofollow noreferrer">https://github.com/AR-js-org/AR.js#get-started</a>
  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. </p>
  
  <p>Things I've tried after going through some pages on stack overflow (but they didn't help)-</p>
  
  <ul>
  <li><p>Initially the image I was using was very basic, so I changed to the Pinball image so that AR.js gets more descriptions.</p></li>
  <li><p>Disabled my chrome extensions like Ad Blocker etc.</p></li>
  </ul>
  
  <p>Can someone help me with what is wrong or missing for the NFT to load properly?</p>
  
  <p>Here's my code -</p>
  
  <pre><code>    &lt;script 
     src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
    .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;
    }
  &lt;/style&gt;
  
  &lt;body style="margin : 0px; overflow: hidden;"&gt;
    &lt;!-- minimal loader shown until image descriptors are loaded --&gt;
    &lt;div class="arjs-loader"&gt;
      &lt;div&gt;Loading, please wait...&lt;/div&gt;
    &lt;/div&gt;
    &lt;a-scene
      vr-mode-ui="enabled: false;"
      renderer="logarithmicDepthBuffer: true;"
      embedded
      arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
    &gt;
      &lt;!-- we use cors proxy to avoid cross-origin problems --&gt;
      &lt;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"
      &gt;
        &lt;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"
        &gt;
        &lt;/a-entity&gt;
      &lt;/a-nft&gt;
      &lt;a-entity camera&gt;&lt;/a-entity&gt;
    &lt;/a-scene&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>UPDATE:</strong>
  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:</p>
  
  <pre><code>&lt;script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
    .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;
    }
  &lt;/style&gt;
  
  &lt;body style="margin : 0px; overflow: hidden;"&gt;
    &lt;!-- minimal loader shown until image descriptors are loaded --&gt;
    &lt;div class="arjs-loader"&gt;
      &lt;div&gt;Loading, please wait...&lt;/div&gt;
    &lt;/div&gt;
    &lt;a-scene
      vr-mode-ui="enabled: false;"
      renderer="logarithmicDepthBuffer: true;"
      embedded
      arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
    &gt;
      &lt;!-- we use cors proxy to avoid cross-origin problems --&gt;
      &lt;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"
      &gt;
        &lt;a-video
          src="https://d2a3azuonia3td.cloudfront.net/ar-js-image-tracking-1/images/video1.mp4"
          width="9"
          height="9"
          position="50 150 0"
        &gt;
        &lt;/a-video&gt;
      &lt;/a-nft&gt;
      &lt;a-entity camera&gt;&lt;/a-entity&gt;
    &lt;/a-scene&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>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.</p>