Web AR with chromakey video

<!doctype HTML>
<html>
 
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<script src="https://unpkg.com/aframe-chromakey-material/dist/aframe-chromakey-material.min.js"></script>

<script>
AFRAME.registerComponent('vidhandler', {
  // ...
  init: function () {
    // Set up initial state and variables.
    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();
    }
  }
});
</script>


  <body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs="debugUIEnabled: false;" vr-mode-ui="enabled: false">
        <a-assets>
          <video id="vid" src="https://focusar-studio.com/webar/beruang.mp4" loop="true" crossorigin>
          </video>
        </a-assets>
 
      <a-marker id="markerku" vidhandler preset="hiro">
         <a-plane position='0 0 0' scale="1 1 1" width="1.7" rotation="-90 0 0" material='shader: chromakey; src:#vid'></a-plane>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

~shader reference: https://github.com/nikolaiwarner/aframe-chromakey-material/blob/master/README.md

Read More