'AR.js does not show video when I hold the camera up to the marker

Assumption. I want to use AR.js technology to display an video when I hold the camera up to a marker. No matter how many times I hold it up, the video does not appear.

What we want to achieve We would like to play the video with sound when the camera is held over the marker. (I want to play the video with sound on iPhone as well.)

Problem/error message being encountered No video is played back when the camera is held over the marker. I have checked for file name or code errors or something like that, but it doesn't seem to be there.

I just tried accessing the actual site and the camera no longer shows up either. I've put the situation on video. enter link description here

Source code in question

<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
<!-- A-Frame Loading Libraries -->
<script src="aframe-master.min.js"></script>
<!-- AR.js Loading Libraries -->
<script src="aframe-ar.js"></script>
</head>
<body style='margin:0px; overflow:hidden;'>
        <a-assets>
           <video id="ar-video" poster="img.jpg" crossOrigin="anonymous" type="video/mp4" src="tanaka.mp4" muted="true" autoplay loop="true" playsinline webkit-playsinline controls />
          </a-assets>
          <!-- Hide screen display for debugging and buttons for VR, respectively. -->
        <a-scene embedded arjs="debugUIEnabled:false;" vr-mode-ui="enabled: false">
          <!-- Load the ".patt" file created this time -->
          <a-marker type='pattern' url='pattern-movie-tanaka.patt'>
              <a-video src="#ar-video" width="2.6" height="1.4" position="0 0 0" rotation="270 0 0" play="true"></a-video>
          </a-marker>
<a-entity camera></a-entity>
        </a-scene>
        
        <script>
          window.addEventListener('click', function () {
          var v = document.querySelector('#ar-video');
          v.play();
          });
        </script>
        <script>
          // Added variable definitions for video storage
          var video = null;
  
          AFRAME.registerComponent('registerevents', {
              init: function () {
                  var marker = this.el;
  
                  // Registration of events where markers are detected
                  marker.addEventListener('markerFound', function () {
  
                      // After marker recognition, video playback
                      if (video == null) {
                          video = document.querySelector('#ar-video');
                      }
                      video.play();
                  });
  
                  // Registration of events with missing markers
                  marker.addEventListener('markerLost', function () {
                      
                      // If marker recognition fails, video stops
                      video.pause();
                  });
              }
          });
  
          
          window.addEventListener('click', function () {
              video = document.querySelector('#ar-video');
              video.play();
          });
      </script>
      </body>
    </html>
javascripthtmlaugmented-realityaframe


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions