WebAR with AR.js

@Bakti19
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/dev/aframe/build/aframe-ar.js"></script>

<script>
    AFRAME.registerComponent('vidhandler', {
  init: function () {
    this.toggle = false;
    document.querySelector("#vid").pause(); //reference to the video
  },
  tick:function(){
      console.log("Enter Tick");
    if(document.querySelector("a-marker").object3D.visible == true){
        console.log("Enter Valid Mode");
        if(!this.toggle){
            console.log("Enter Play Mode");
            this.toggle = true;
            document.querySelector("#vid").play();
        }
  }else{
      console.log("Enter Pause Mode");
     this.toggle = false;
     document.querySelector("#vid").pause();
  }
  init: function() {
    this.marker = document.querySelector("a-marker")
    this.markerVisible = false
},
tick: function() {
   if (!this.marker) return
   if (this.marker.object3D.visible) {
      if (!this.markerVisible) {
         // marker detected
         this.markerVisible = true
      }
   } else {
      if (this.markerVisbile) {
         // lost sight of the marker
         this.markerVisible = false
      }
   }
}
  }
});
</script>


<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam;'>
      <a-marker preset='hiro' >
          <a-video vidhandler id="vid" src="mayaopening.mp4" autoplay loop="true" width="2" height="1.5" position="0 0 -1.5" rotation="90 180 0"></a-video>
      </a-marker>
</a-scene>
</body>

Read More