3

I have a problem with positioning video element right within the NFT marker area. Digged through AR.JS and AFRAME documentation with no luck.

The problem: on each device with different screen resolution and camera resolution video is positioned different. If i set sourceWidth, sourceHeight, displayWidth, displayHeight according to my PC webcam i no longer able to see the object on my smartphone, because it gets rendered off-screen.

The second problem is to make video element exactly sized like the marker. On different devices and cameras video size is different.

See the screenshot

My Code is almost similar to nft examples in ar.js repository.

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

<script>
    window.onload = function() {
        AFRAME.registerComponent('videohandler', {
            init: function () {
                var marker = this.el;

                this.vid = document.querySelector("#vid");

                marker.addEventListener('markerFound', function () {
                    this.vid.play();
                }.bind(this));
    
        marker.addEventListener('markerLost', function() {
            this.vid.pause();
            this.vid.currentTime = 0;
        }.bind(this));
            }
        });
    };
</script>

<body style="margin: 0px; overflow: hidden">

    <a-scene vr-mode-ui="enabled: false;" renderer="logarithmicDepthBuffer: false; " embedded arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false; sourceWidth:414; sourceHeight:736; displayWidth: 414; displayHeight: 736;">
      <a-assets>
        <video src="https://cors-anywhere.herokuapp.com/https://www.w3schools.com/html/mov_bbb.mp4" preload="auto" id="vid" response-type="arraybuffer" loop
          crossorigin webkit-playsinline autoplay muted playsinline preload="true"></video>
      </a-assets>

      <a-nft type="nft" videohandler url="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/data/dataNFT/pinball" smooth="true" smoothCount="10" smoothTolerance="0.01" smoothThreshold="5" preload="true">
        <a-video src="#vid" position="0 0 0" width="300" height="424" rotation="-90 0 0" videoelement>
        </a-video>
      </a-nft>

      <a-entity camera></a-entity>
    </a-scene>
</body>

Live example in repo: https://ar-js-org.github.io/AR.js/aframe/examples/image-tracking/nft-video/ Scan this image: https://raw.githubusercontent.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft-video/pinball.jpg

Is there a way, for example, to get marker size and position and set video element exact size and position?

Any help is appreciated!

alpha-helix
  • 39
  • 3

1 Answers1

0

I recently encountered this issue using NFT and discovered that the x,y,z position axis don't really adjust (or are out of whack) until you modify more than one axis at a time.

Not sure if it helps, but that worked for me because changing one axis at a time and checking the position was a headache. Also, make your adjustments drastic +/- 300 so you know which angle it adjusts because I'm pretty sure my axis were screwed up. Im not sure if orientation wanted me to have the tracked object on a surface vs. in my hand - but it made it difficult to test.

Additionally using an iphone in Safari worked well but an android on chrome was having tracking and positional issues.

I used the iphone on Safari to set the tracking and position then verified it with a different device.

Warren R.
  • 1