title: AR.JS Can't get Video or Picture working with NFT only 3D
body: <p>I finally have given up as I can't get AR.JS to run with a simple NFT marker that should display a Video or a PNG image over it. If I run it with a GLTF Model it works without problems. I tried changing the scale and position to see if it is somehow behind the marker etc. but that doesn't help in any way.</p>
  
  <p>The console doesn't throw me any errors as well.</p>
  
  <p>Could anybody throw me a short fix as I tried a lot of different stuff but nothing gets displayed.</p>
  
  <p>Link to page with marker <a href="https://natrium83.github.io" rel="nofollow noreferrer">https://natrium83.github.io</a></p>
  
  <p>Link to 3D example <a href="https://natrium83.github.io/ar3d/" rel="nofollow noreferrer">https://natrium83.github.io/ar3d/</a></p>
  
  <p>Link to Picture example <a href="https://natrium83.github.io/arbild/" rel="nofollow noreferrer">https://natrium83.github.io/arbild/</a></p>
  
  <p>Link to Video example <a href="https://natrium83.github.io/arvideo/" rel="nofollow noreferrer">https://natrium83.github.io/arvideo/</a></p>
  
  <p>Here is the code for the image:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
      &lt;title&gt;Image based tracking AR.js demo&lt;/title&gt;
      &lt;!-- import aframe and then ar.js with image tracking / location based features --&gt;
      &lt;script src="https://aframe.io/releases/1.0.4/aframe.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 for the loader --&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;/head&gt;
    &lt;body style="margin : 0px; overflow: hidden;"&gt;
      &lt;!-- minimal loader shown until image descriptors are loaded. Loading may take a while according to the device computational power --&gt;
      &lt;div class="arjs-loader"&gt;
        &lt;div&gt;Loading, please wait...&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- a-frame scene --&gt;
      &lt;a-scene
        vr-mode-ui="enabled: false;"
        renderer="logarithmicDepthBuffer: true;"
        embedded
        arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"&gt;
        &lt;!-- a-nft is the anchor that defines an Image Tracking entity --&gt;
        &lt;!-- on 'url' use the path to the Image Descriptors created before. --&gt;
        &lt;!-- the path should end with the name without the extension e.g. if file is trex.fset' the path should end with trex --&gt;
        &lt;a-nft
          type="nft"
          url="https://natrium83.github.io/ar3d/assets/marker_image"
          smooth="true"
          smoothCount="10"
          smoothTolerance=".01"
          smoothThreshold="5"&gt;
            &lt;!-- as a child of the a-nft entity, you can define the content to show. here's a GLTF model entity --&gt;
            &lt;a-entity&gt;
  
  
  
            &lt;a-image src="https://natrium83.github.io/arbild/assets/bild.png"
                scale="5 5 5"
                position="100 100 0"
                crossorigin
            &gt;&lt;/a-image&gt;
            &lt;/a-entity&gt;
  
        &lt;/a-nft&gt;
        &lt;!-- static camera that moves according to the device movemenents --&gt;
        &lt;a-entity camera&gt;&lt;/a-entity&gt;
      &lt;/a-scene&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>'''</p>