A-Frame Course - Source of /examples/2000-tui-book-ar.html

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />

    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@4.2.1/dist/aframe-event-set-component.min.js"></script>
    <script src="https://unpkg.com/aframe-proxy-event-component/dist/aframe-proxy-event-component.min.js"></script>
    <script src="https://unpkg.com/aframe-fps-counter-component@1.0.1/dist/aframe-fps-counter-component.min.js"></script>


    <script>
      AFRAME.registerComponent("arjs-camview", {
        schema: {},

        init: function () {
          let _this = this;
          // Select the node that will be observed for mutations
          const targetNode = document.body;

          // Options for the observer (which mutations to observe)
          const config = { attributes: false, childList: true, subtree: false };

          // Callback function to execute when mutations are observed
          const callback = function (mutationsList, observer) {
            // Use traditional 'for loops' for IE 11
            for (const mutation of mutationsList) {
              if (mutation.type === "childList") {
                console.log("A child node has been added or removed.");

                mutation.addedNodes.forEach(function(node){
                  if (node.id === "arjs-video") {
                    console.log(node);
                    _this.el.setAttribute("src", "#arjs-video");

                    observer.disconnect();
                  }
                });
              } 
            }
          };

          // Create an observer instance linked to the callback function
          const observer = new MutationObserver(callback);

          // Start observing the target node for configured mutations
          observer.observe(targetNode, config);

        },
      });
    </script>

    <script>
      AFRAME.registerComponent("delay-marker-lost", {
        schema: { default: 1.0 },
        init: function () {
          this.timer = null;
          this.marker = false;
          this.el.addEventListener(
            "markerFound",
            function (evt) {
              let value = evt.target.getAttribute("value");
              let prev = this.marker;
              if (!prev) {
                this.marker = true;
                this.el.emit("delayMarkerFound");
                console.log("delayMarkerFound ", value);
              }
              clearTimeout(this.timer);
              //console.log(this.markers)
            }.bind(this)
          );
          this.el.addEventListener(
            "markerLost",
            function (evt) {
              let value = evt.target.getAttribute("value");
              let _this = this;
              clearTimeout(this.timer);
              this.timer = setTimeout(function () {
                _this.el.emit("delayMarkerLost");
                console.log("delayMarkerLost ", value);
                _this.marker = false;
                //console.log(_this.timer, _this.markers)
              }, 1500);
            }.bind(this)
          );
        },
      });
    </script>
  </head>

  <body>
    <a-scene
      stats
      embedded        
      arjs="sourceType:webcam;  debugUIEnabled: false;debug:false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;"
    >
      <a-assets>
        <img
          id="tron1"
          src="https://cdn.glitch.me/80978ab7-9db6-45ae-bc43-4fab16bdbb6e%2Fvlcsnap-2021-08-12-18h57m26s414.png?v=1633700386840"
        />
        <img
          id="tron2"
          src="https://cdn.glitch.me/80978ab7-9db6-45ae-bc43-4fab16bdbb6e%2Fvlcsnap-2019-10-19-23h28m36s643.png?v=1633701130163"
        />
        <img
          id="tron3"
          src="https://cdn.glitch.me/80978ab7-9db6-45ae-bc43-4fab16bdbb6e%2Fvlcsnap-2019-10-19-23h21m20s409.png?v=1633701405872"
        />

        <a-asset-item
          id="recognizer"
          src="https://raw.githubusercontent.com/jorgecardoso/aframe-course-resources/master/recognizer_tron/scene.gltf"
        ></a-asset-item>
      </a-assets>


      <a-sky color="lightblue"></a-sky>
      <a-camera>
        <a-entity fps-counter position="0 0 -1"></a-entity>

        <a-plane
          arjs-camview
          position="0 0 -15"
          scale="3 3 3"
          width="6.4"
          height="4.8"          
        ></a-plane>

        <a-marker type="barcode" value="0">
          <a-image
            src="#tron1"
            width="2.6"
            height="2.6"
            rotation="-90 0 0"
          ></a-image>
        </a-marker>

        <a-marker type="barcode" value="1">
          <a-image
            src="#tron2"
            width="2.6"
            height="2.6"
            rotation="-90 0 0"
          ></a-image>
        </a-marker>

        <a-marker type="barcode" value="2">
          <a-image
            src="#tron3"
            width="2.6"
            height="2.6"
            rotation="-90 0 0"
          ></a-image>
          <a-gltf-model
            position="0 2.8 0"
            scale="0.1 0.1 0.1"
            src="#recognizer"
          ></a-gltf-model>
        </a-marker>
      </a-camera>

      <!-- 45 fps smartphone vr mode -->
    </a-scene>
  </body>
</html>