-2

I am using A-Frame. I am trying to augment a Video (mp4) when the pattern or marker (HIRO) is hovered in front of my webcam, the video should be loaded or played on the marker. Now The issue with this code is when the page gets loaded the video gets played automatically without any marker or pattern (HIRO). The video is displayed on the marker.

I just want to load the video whenever the pattern or marker is shown. Without patter, it should not load. Please help me with this Eg: Video playBack in AR https://www.youtube.com/watch?v=jkcvfygpKiM&vl=en Video Augmentation on Marker

enter image description here

<meta name="apple-mobile-web-app-capable" content="yes">
<!-- <script src="vendor/aframe/build/aframe.min.js"></script> -->
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<!-- <script src="vendor/aframe/build/aframe.js"></script> -->
<!-- include for artoolkit trackingBackend -->
<script src='aframe_lib/artoolkit.min.js'></script>
<script src='aframe_lib/artoolkit.api.js'></script>
<!-- include for aruco trackingBackend -->
<script src='aframe_lib/svd.js'></script>
<script src='aframe_lib/posit1.js'></script>
<script src='aframe_lib/cv.js'></script>
<script src='aframe_lib/aruco.js'></script>
<script src='aframe_lib/threex-arucocontext.js'></script>
<script src='aframe_lib/threex-arucodebug.js'></script>
<!-- include for tango trackingBackend -->
<script src='aframe_lib/THREE.WebAR.js'></script>
<!-- include ar.js -->
<script src='aframe_lib/signals.min.js'></script>
<script src='aframe_lib/threex-artoolkitprofile.js'></script>
<script src='aframe_lib/threex-artoolkitsource.js'></script>
<script src='aframe_lib/threex-artoolkitcontext.js'></script>
<script src='aframe_lib/threex-arbasecontrols.js'></script>
<script src='aframe_lib/threex-armarkercontrols.js'></script>
<script src='aframe_lib/threex-arsmoothedcontrols.js'></script>
<script src='aframe_lib/threex-hittesting-plane.js'></script>
<script src='aframe_lib/threex-hittesting-tango.js'></script>
<script src='aframe_lib/threex-armarkerhelper.js'></script>
<script src='aframe_lib/arjs-utils.js'></script>
<script src='aframe_lib/arjs-session.js'></script>
<script src='aframe_lib/arjs-anchor.js'></script>
<script src='aframe_lib/arjs-hittesting.js'></script>
<script src='aframe_lib/arjs-tangovideomesh.js'></script>
<script src='aframe_lib/arjs-tangopointcloud.js'></script>
<script src='aframe_lib/arjs-debugui.js'></script>
<script src='aframe_lib/threex-armultimarkerutils.js'></script>
<script src='aframe_lib/threex-armultimarkercontrols.js'></script>
<script src='aframe_lib/threex-armultimarkerlearning.js'></script>
<!-- include aframe-ar.js -->
<script src="aframe_lib/system-arjs.js"></script>
<script src="aframe_lib/component-anchor.js"></script>
<script src="aframe_lib/component-hit-testing.js"></script>
<!-- start the body of your page -->

<body style='margin : 0px; overflow: hidden;'>
  <a-scene embedded arjs='trackingMethod: best;'>
    <a-anchor hit-testing-enabled='true'>
      <a-entity>
        <video type="video/mp4" id="penguin-sledding" autoplay="true" loop="false" src="resources/video.mp4" webkit-playsinline>
         </a-entity>
         <a-video  position="0 0.2 0" src="#penguin-sledding" rotation="90 180 0"></a-video>
      </a-anchor>
      <a-camera-static preset='hiro'/>
      <a-entity light="color: #ccccff; intensity: 1; type: ambient;" visible="">
      </a-entity>
   </a-scene>
</body>
a stone arachnid
  • 1,272
  • 1
  • 15
  • 27
Aryan
  • 81
  • 2
  • 13
  • 1
    Possible duplicate of [How to detect when marker is found in AR.js](https://stackoverflow.com/questions/44799413/how-to-detect-when-marker-is-found-in-ar-js) – Piotr Adam Milewski Jul 16 '18 at 15:11
  • 1
    No, Actually the issue is while augmenting video, I am not able to play the video on marker – Aryan Jul 18 '18 at 13:00

1 Answers1

2

Its playing when its loaded because of the autoplay attribute. Also you should throw the video to the assets.

To play the video when the marker is visible , make sure you have the video inside a <a-marker> node like here. 
<a-marker>
    <a-video vidhandler></a-video>
</a-marker>

When you see the marker - play the video.
Once you lose the marker - pause the video

AFRAME.registerComponent('vidhandler', {
  init: function () {
    this.toggle = false;
    document.querySelector("#vid").pause(); //reference to the video
  },
  tick:function(){  
   if(document.querySelector("a-marker").object3D.visible == true){
     if(!this.toggle){
       this.toggle = true;
       document.querySelector("#vid").play();
     }
   }else{
     this.toggle = false;
     document.querySelector("#vid").pause();
   }
  }
});
Piotr Adam Milewski
  • 14,150
  • 3
  • 21
  • 42
  • I have integrated your code with my code, but still, it's not working. The code is in the following link can you please go through it and help me - https://jsfiddle.net/anil001ry/grh7ut3L/8/ ............. Thanks in advance – Aryan Jul 19 '18 at 11:50
  • This works well on Android but I cannot for the life of me get it working on Safari on iOS? any help would be appreciated. – alib0ng0 Jan 08 '20 at 11:52
  • You probably need to have any user interaction (click) for the video to play on iOS. Make sure the video is working without ar.js (vanilla aframe). – Piotr Adam Milewski Jan 08 '20 at 12:18