我在将视频元素定位在 NFT 标记区域内时遇到问题。仔细研究了 AR.JS 和 AFRAME 文档，但没有成功。
问题：在具有不同屏幕分辨率和相机分辨率的每个设备上，视频的位置不同。如果我根据我的 PC 网络摄像头设置 sourceWidth、sourceHeight、displayWidth、displayHeight，我将无法再在智能手机上看到该对象，因为它会在屏幕外渲染。
第二个问题是使视频元素的大小与标记完全相同。在不同的设备和相机上，视频大小是不同的。
我的代码几乎与 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: …