我在 NFT 标记区域内定位视频元素时遇到问题。
在没有运气的情况下挖掘了 AR.JS 和 AFRAME 文档。
问题:在具有不同屏幕分辨率和相机分辨率的每个设备上，视频的位置不同。
如果我根据我的 PC 网络摄像头设置 sourceWidth、sourceHeight、displayWidth、displayHeight，我将无法再在智能手机上看到该对象，因为它在屏幕外呈现。
第二个问题是使视频元素的大小与标记完全相同。在不同的设备和相机上视频大小是不同的。
See the screenshot
我的代码几乎类似于 ar.js 存储库中的 nft 示例。
<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>
扫描此图片:https://raw.githubusercontent.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft-video/pinball.jpg
例如，有没有办法获取标记大小和位置并设置视频元素的确切大小和位置？
任何帮助表示赞赏!
最佳答案
我最近也遇到了这个问题，你可以在github上查看这个问题。但这个问题是开放的。
所以经过几天的搜索，我找到了 this令人惊叹的 Github 存储库，它似乎是 AR js 的包装器，解决了将 3d 对象/视频集中在检测到的图像上的问题。
使用心灵增强现实
关于javascript - A-Frame，AR.JS。如何在 NFT-Marker 中定位对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64646001/