J'ai un problème de positionnement de l'élément vidéo à l'intérieur de la zone du marqueur NFT. J'ai consulté la documentation AR.JS et AFRAME sans succès.
Le problème : sur chaque appareil avec une résolution d'écran et une résolution de caméra différentes, la vidéo se positionne différemment. Si je règle les paramètres sourceWidth, sourceHeight, displayWidth, displayHeight en fonction de la webcam de mon PC, je ne peux plus voir l'objet sur mon smartphone, car il est rendu hors écran.
Le deuxième problème est de faire en sorte que l'élément vidéo ait exactement la même taille que le marqueur. La taille de la vidéo varie selon les appareils et les caméras.
Mon code est presque similaire aux exemples nft dans le dépôt ar.js.
<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>Exemple concret dans le dépôt : https://ar-js-org.github.io/AR.js/aframe/examples/image-tracking/nft-video/ Numérisez cette image : https://raw.githubusercontent.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft-video/pinball.jpg
Existe-t-il un moyen, par exemple, d'obtenir la taille et la position du marqueur et de définir la taille et la position exactes de l'élément vidéo ?
Toute aide est appréciée !
