I'm trying to do a project on ar.js

Question

I found a code on glitch that plays a video when scanning the marker but the problem is it works only on desktop,on chrome android the video doesn't come up, only the sound can be heard..please help me since I don't know much coding. Here is the source code:

<html>

<head>
  <!-- AR.js by @jerome_etienne - github: https://github.com/jeromeetienne/ar.js - info: https://medium.com/arjs/augmented-reality-in-10-lines-of-html-4e193ea9fdbf -->
  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
  <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.8.4/dist/aframe-extras.min.js"></script>

  <script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.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;'>
  <div style='position: fixed; top: 10px; width:inherit; text-align: center; z-index: 1;'>
    <a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - Check out the repository !
  </div>
  <a-scene embedded artoolkit='sourceType: webcam; detectionMode: mono; maxDetectionRate: 30; canvasWidth: 240; canvasHeight: 180' >
    <a-assets>
      <video id="vid" src="https://cdn.glitch.com/b62367d1-ceab-454b-b664-b032f995ed86%2FBig_Buck_Bunny_Trailer_1080p.ogv.720p.webm?1532370072191" loop="true" crossorigin>
    </a-assets>
   
    <a-marker id="memarker" preset="hiro" vidhandler>
      <a-plane position='1 2 -2' scale="2 2 2" width="2" rotation="-90 0 0" material='transparent:true;opacity: 0.7;src:#vid'></a-plane>
    </a-marker>

  </a-scene>
</body>


</html>

if someone could tell me what to do, it would be very helpful

Just make sure you have proper support on Chrome-for-Android — Justinas, Mar 11 '19 at 17:43
at least change the title to describe the problem, so anyone with similar problems can stumble upon this question. — Piotr Adam Milewski, Mar 11 '19 at 17:49

Piotr Adam Milewski · Answer 1 · 2019-03-28T19:29:24.403

2

The problem here is the position of the video - it's showing up, but far away. If you change the plane to a <a-box>, and set it's position to 0 0 0, then on both chrome, and firefox for android the video is showing up.

Check it out here.

One tip: if some weird stack overflow anwser code is not working properly - try simplyfing it as much as possible: - Throw out the unnecessary includes (aframe-extras for example) - Simplify the scene as much as possible. Any extra geometries, components - just to make it plain.

If it won't help, then for sure it will make debugging easier.

edited Mar 28 '19 at 19:29

answered Mar 11 '19 at 17:42

Piotr Adam Milewski

14,150
3
21
42

can it be solved using itself..i tried setting position 0 0 0 ..still isnt working ..it works on as u said.. – fhk 231 Mar 13 '19 at 11:38
@fhk231 works with a box, won't work with a plane ? I'll check it out at home, but did you try settings the material side `material="side: both"` ? – Piotr Adam Milewski Mar 13 '19 at 11:40
yes..i want it to play in the plane itself..it works really well at desktop..only problem is its not working in android – fhk 231 Mar 13 '19 at 11:53
can you help me..? – fhk 231 Mar 13 '19 at 16:54

I'm trying to do a project on ar.js

1 Answers1