How to add buttons in argument reality in ios

Glitch Help
, ,
1

i’m trying to make ar webapp which will open using link or QR code, so i have one demo for it but buttons are not showing up in ios it’s working fine for ios so will someone will help me with that and also videos are not showing in ar.

Here is my working code

<model-viewer> example 
<link rel="stylesheet" href="demo-styles.css">

<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->

<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>

<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>

<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.0/dist/ResizeObserver.js"></script>

<!-- 💁 OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types -->
<script src="https://unpkg.com/focus-visible@5.0.2/dist/focus-visible.js" defer></script>

          <model-viewer d="model" src="https://cdn.glitch.com/074c0c32-e120-42b0-a6d6-99e933afd975%2FRobotExpressive.glb?v=1596114944960"
              ios-src="https://cdn.glitch.com/074c0c32-e120-42b0-a6d6-99e933afd975%2Fscenemtdsaxysa4f4sr4j.usdz?v=1596106166880"
              alt="A 3D model of an astronaut" shadow-intensity="1" camera-controls auto-rotate ar>

      <div style="margin-top: 50px; margin-left: 10px;">
        <video id="myVideo" width="120" height="100">
            <source src="https://cdn.glitch.com/074c0c32-e120-42b0-a6d6-99e933afd975%2Fasn.mp4?v=1596111084854" type="video/mp4">
            Your browser does not support HTML5 video.
        </video>
      </div>
        

        <script>
            var vid = document.getElementById("myVideo");

            function playVid() {
                vid.play();
            }

            function pauseVid() {
                vid.pause();
            } 
        </script>
      
      <script>
          var modelViewer = document.getElementById('model');

          function stop(){
              modelViewer.animationName = 'Idle';
          }
          function run(){
              modelViewer.animationName = 'Running';
          }
          function wave(){
              modelViewer.animationName = 'Wave';
          }
      </script>
    

        <div class="btn-container">
            <button onclick="playVid()" type="button">Play Video</button>
            <button onclick="pauseVid()" type="button">Pause Video</button><br>

            <button type="button" onclick="stop()" >STOP</button>
            <button type="button" onclick="run()">RUN</button>
            <button type="button" onclick="wave()">WAVE</button>

        </div>
         
    </model-viewer>


    <script>
        function myFunction() {
            alert("I am an alert box!");
        }
    </script>

    <!-- <section class="attribution">
  <span>
    <h1>Astronaut</h1>
    <span>By <a href="https://poly.google.com/view/dLHpzNdygsg" target="_blank">Poly</a></span>
  </span>
  <a class="cc" href="https://creativecommons.org/licenses/by/2.0/" target="_blank">
    <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg">
    <img src="https://mirrors.creativecommons.org/presskit/icons/by.svg">
  </a>
</section>

–>

</div>


<footer>
    <!--     <span>This page is a basic demo of the <a href="https://github.com/GoogleWebComponents/model-viewer" target="_blank">&lt;model-viewer&gt;</a> web component.</span>
<span>It makes displaying 3D and AR content on the web easy ✌️</span>
<a href="https://glitch.com/edit/#!/remix/model-viewer">
  <img src="https://cdn.glitch.com/2bdfb3f8-05ef-4035-a06e-2043962a3a13%2Fremix%402x.png?1513093958726" alt="remix button" aria-label="remix" height="33">
</a> -->

    <span>Experiencious</span>
</footer>


<!-- 💁 Include both scripts below to support all browsers! -->

<!-- Loads <model-viewer> for modern browsers: -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
</script>

<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
</script>