Aligning video elements with NFT markers in A-Frame and AR.js

NFT
1

I’m trying to get a video to show up correctly inside an NFT marker area using A-Frame and AR.js. But I’m running into some issues:

  1. The video’s position changes on different devices. When I set the source and display dimensions for my computer, the video doesn’t appear on my phone.

  2. I can’t get the video to match the marker’s size across various devices and cameras.

I’ve checked the documentation but didn’t find a solution. Here’s a simplified version of my code:

<a-scene embedded arjs="trackingMethod: best; sourceType: webcam;">
  <a-assets>
    <video id="myVideo" src="example.mp4" loop muted playsinline></video>
  </a-assets>

  <a-nft type="nft" url="marker-data" smooth="true">
    <a-video src="#myVideo" width="300" height="424" rotation="-90 0 0"></a-video>
  </a-nft>

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

Is there a way to determine the marker’s size and position first, and then use that information to set the video’s dimensions and location? Any suggestions would be greatly appreciated!

2

I’ve encountered similar issues when working with AR.js and A-Frame. One approach that helped me was using the ‘minDistance’ and ‘maxDistance’ attributes on the a-nft element. This allows you to set boundaries for when the marker becomes visible, which can help with consistency across devices.

Another trick I found useful was to create a parent entity for your video and use the ‘scale’ attribute to adjust its size relative to the marker. Something like this:

You might need to experiment with the scale values to get the right size. Also, consider using a-plane instead of a-video for more control over positioning and sizing. Hope this helps!

3

hey, try using the ‘emitevents’ attribute on ur a-nft element. it’ll trigger events when the marker is found/lost. then u can use javascript to dynamically adjust the video size based on the marker dimensions. something like:

then in ur js, listen for ‘markerFound’ event and set video size. might solve ur cross-device issues!

4

Hey FlyingEagle, interesting problem you’ve got there! :thinking: Have you considered using the ‘embedded’ attribute on your a-scene element? i’ve found it can sometimes help with sizing issues across devices. Also, what about trying to use percentages for your video dimensions instead of fixed values? like this:

might make it more responsive? oh, and have you played around with the ‘fit’ property on the video element? could help with scaling.

just curious, what kind of content are you trying to display in the AR? sounds like a cool project! :smiley: