0

I want to Play A video when the marker(HIRO) is detected using the webcam. When I remove it should be paused and when the marker is detected the video should play using A-Frame. I had written the code but it's not working. Can anyone help me? I tried all possible way but it's not working so, Can Anyone post the code or send an example.

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

Eg : Video Augmentation

         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();
         }
         }
         });
         
     
<!DOCTYPE html>
<html>
   <head>
      <title>Video AR</title>
   </head>
   <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>
   <body>
      <a-scene embedded arjs='trackingMethod: best;'>

         <a-anchor hit-testing-enabled='true'>

            <a-assets>

               <video  type="video/mp4" id="vid"    loop="false" src="https://ucarecdn.com/bb90f1f8-134e-4eb2-9688-38721ee7e9ad/" webkit-playsinline >
               </video>

            </a-assets>

            <a-marker type="pattern" url="https://ucarecdn.com/80ba69d9-96f2-46e7-aa62-8168f2ac06a5/">

               <a-video vidhandler  position="0 0.2 0" src="#vid" rotation="90 180 0"></a-video>

            </a-marker>

         </a-anchor>

         <a-entity light="color: #ccccff; intensity: 1; type: ambient;" visible=""></a-entity>

      </a-scene>
      
   </body>
Aryan
  • 81
  • 2
  • 13

1 Answers1

4

1) make sure you load the video properly in the assets - throw in the crossorigin: anonymous and make sure you can access the video.

<a-assets>
  <video id="vid" src="buckBunny.mp4" loop="true" crossorigin>
</a-assets>

2) set up the marker

<a-marker preset="hiro" vidhandler>
  <a-plane position='1 2 0' scale="2 2 2" width="2" rotation="-90 0 0" 
   material='transparent:true; opacity: 0.7; src:#vid'></a-plane>
</a-marker>

3) Make a component which will play the video, once / only when the marker is seen

AFRAME.registerComponent('vidhandler', {
  init: function () {
    this.toggle = false;
    this.vid = document.querySelector("#vid")
    this.vid.pause()
},
tick:function(){
   if(this.el.object3D.visible == true){
     if(!this.toggle){
       this.toggle = true;
       this.vid.play();
    }
  }else{
    this.toggle = false;
    this.vid.pause();
  }
 }
});

4) enjoy Big Buck bunny in your living room enter image description here

5) Check out my glitch.

Piotr Adam Milewski
  • 14,150
  • 3
  • 21
  • 42
  • once i check out the [ar events](https://github.com/jeromeetienne/AR.js/pull/303#issuecomment-405563887) i'll modify the anwser to utilize the new events – Piotr Adam Milewski Jul 23 '18 at 18:39
  • Hello Piotr Adam Milewski, Its works fine. But there is a small issue when we show the marker, a blank screen displays on the marker. when we reload or wait for some time the video gets loaded and played. but initially, there is an issue with loading. If there is a loading issue can we show buffering or loading on the marker. Can we increase the performance of loading video on marker. – Aryan Jul 26 '18 at 07:10