AR.js嵌入div非全屏适配及iOS端iframe内NFT标记无法识别问题求助

问题说明 #

• 尝试将AR.js适配到div内非全屏展示，无法手动修改尺寸，AR.js内部会监听resize事件自动将尺寸改回全屏
• 改用iframe实现非全屏效果的方案，桌面端浏览器运行正常，但iOS端Safari、Chrome浏览器无法检测NFT标记；无iframe的全屏模式下NFT标记检测功能正常
• 已对iOS端iframe场景做控制台调试，无报错，标记相关事件绑定成功

相关代码 #

arjs_scene.html（NFT检测基础代码） #

<!-- import aframe and then ar.js with image tracking / location based features -->
<script src="https://aframe.io/releases/1.0.4/aframe.min.js" crossorigin="anonymous"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js" crossorigin="anonymous"></script>
<script>
    var currentMarker = "";
    var initFunc = function () {
        var marker = this.el;

        //create aentity element with attributes append to marker
        var aentity = document.createElement('a-entity')
        aentity.setAttribute('gltf-model', 'asta.gltf');
        aentity.setAttribute('scale', '15 15 15');
        aentity.setAttribute('rotation', '0 -90 90');
        aentity.setAttribute('position', '0 50 0');
        marker.appendChild(aentity);

        console.log("scene id: " + this.el.sceneEl);

        this.el.sceneEl.addEventListener('markerFound', (evt) => { //event is triggered for all markers when a marker is found
            var id = evt.target.id;
            console.log("found id: " + marker.id);

            if(id!=currentMarker) { //do work once when new maeker found
               // alert(evt.target.id);
                currentMarker = id;
                document.getElementById("takePhotoBtn").disabled = false;
            }       
        });
    };
   AFRAME.registerComponent('markerhandler',  {init: initFunc});

</script>

<!-- style for the loader -->
<style>
  .arjs-loader {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .arjs-loader div {
    text-align: center;
    font-size: 1.25em;
    color: white;
  }
  .buttons {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5em;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
    }

    .take-photo-btn {
      padding: 0.25em;
      border-radius: 4px;
      border: none;
      background: white;
      color: black;
      width: 20em;
      height: 10em;
    }
</style>

<body style="margin : 0px; overflow: hidden;">
  <!-- minimal loader shown until image descriptors are loaded. Loading may take a while according to the device computational power -->
  <div class="arjs-loader">
    <div>Loading, please wait...</div>
  </div>

  <div class="buttons">
    <button id="takePhotoBtn" class="take-photo-btn" disabled="true">Take Photo!</button>
  </div>
  <div id="myEmbeddedScene">
  <!-- a-frame scene -->
  <a-scene
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;"
  >
    <!-- a-nft is the anchor that defines an Image Tracking entity -->
    <!-- on 'url' use the path to the Image Descriptors created before. -->
    <!-- the path should end with the name without the extension e.g. if file is 'pinball.fset' the path should end with 'pinball' -->
    
    <a-nft markerhandler
      id="test"
      type="nft"
      url="./210909_test"
      emitevents="true"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
    </a-nft>
    <!-- static camera that moves according to the device movemenents -->
    <!-- <a-entity camera></a-entity> -->
  </a-scene>
</div>
</body>

index.html（iframe加载首页代码） #

<!DOCTYPE html>

<script src="https://kit.fontawesome.com/c9500776a0.js" crossorigin="anonymous"></script>
<script>
  function addScene() {
    var scene = document.createElement("iframe")
    scene.setAttribute("src", "arjs_scene.html")
    scene.setAttribute("height", "300")
    scene.setAttribute("width", "300")
    scene.setAttribute("allow", "camera")
    document.querySelector("#cameradiv").appendChild(scene)
  }
</script>
<style>
    div {
      align-items: center;
      justify-content: center;
      margin: auto;
      width: 50%;
    }
    iframe{
      width:800px;
      height:800px;
      border-width: 0px;
    }
    /* div,
    body,
    html {
        height: 100%;
        width: 100%;
    } */
    body{
        height:100%;
        width: 100%;
    }

    #menu a {
      display: block;
    }

</style>

<body>
    <div id="menu">
      <button onclick="addScene()" style="display: block;">
        <p>
          Add ar.js scene !
        </p>
        </button>
        <p></p>
        <div id="cameradiv">

        </div>
        <iframe src="arjs_scene.html" allow="camera"></iframe>
      </div>

</body>
</html>

内容的提问来源于stack exchange，提问作者dqualias