Struggling to find a solution for aligning the video element correctly within the NFT marker area after exploring AR.JS and AFRAME documentation without success.
The issue: The positioning of the video varies on different devices with varying screen and camera resolutions. Setting sourceWidth, sourceHeight, displayWidth, and displayHeight based on my PC webcam configuration results in the object being rendered off-screen on my smartphone.
Another challenge is ensuring that the video element matches the size of the marker accurately, which varies across devices and cameras.
My code closely resembles the nft examples in the 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 demo available at: Scan this image to test: https://raw.githubusercontent.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft-video/pinball.jpg
Is there any way to retrieve marker size and position dynamically to set the video element's exact size and position?
Your assistance would be greatly appreciated!