Ar.js: Embedding into a div

[OnlyAGhost]

I'm probably not understanding something correctly. I am trying to embed this into an existing site, using just A-Frame I was able to embed it and it stay within it's bounds. When I switch to adding the artoolkit it is capturing the video stream and adding it to the body it seems like, so it is always taking full screen and my other components are overlaid on top of the video stream.

[PaulohFerreira]

I don't know if it will help you, but you can embeed a canvas element in your page and pass the reference to the THREE.WebGLRenderer object:

• In your HTML, set a canvas:
  <canvas id="canvasExample"> HTML5 Canvas not supported </canvas>

• In the Javascript, use:
  var renderer = new THREE.WebGLRenderer( { canvas: canvasExample } );

[OnlyAGhost]

Thanks! I was trying to use the aframe version and kept getting stuck having it embed and just just be giant taking up the whole page. I switched to trying to use Three.js instead, and the video takes up the whole page in the background but sets the z-index to -1. I was struggling getting it working without using drawImage in the render thread to copy the video from the video object into the canvas. I'm just starting to get into this so I'm probably just not following some piece of it.

[OnlyAGhost]

My workaround was that I had to specify the displayWidth and displayHeight, then I loaded my canvas with the video feed as a texture:

  var texture = new THREE.VideoTexture( (<any>bezl.vars.artoolkitsrc.domElement) );
  texture.minFilter = THREE.LinearFilter;
  texture.magFilter = THREE.LinearFilter;
  texture.format = THREE.RGBFormat;
  bezl.vars.scene.background = texture;

And that seemed to work.

[idmick]

@OnlyAGhost Could you explain more on how you've got it to work?

My current code looks like this (working with Vuejs)

<template>
  <div id="myembeddedScene">
    <a-scene embedded arjs='trackingMethod: best;'>
      <a-anchor hit-testing-enabled='true'>
        <a-image src='https://galerie.sbk.nl/Plaatjes/ams/jpg/JZ8014.jpg' position="0 0 0" rotation="-90 0 0" width="6px" height="4px"></a-image>
      </a-anchor>
        <a-camera-static/>
    </a-scene>
  </div>
</template>

<script>
  export default {
    props: [
      'painting'
    ]
    // created () {
    //   let canvas = new THREE.WebGLRenderer({myembeddedScene: })
    // }
  }
</script>
<style>
a-scene {
    display: block;
    height: 250px;
    width: 50%;
}

#myEmbeddedScene {
    width: 100%;
    height: 200px;
    position: relative;
    display: flex; 
    min-height: 100vh; 
    width: 100%; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
}

body {
  display: flex; 
  min-height: 100vh; 
  width: 50%; 
  align-items: center; 
  /* justify-content: center;  */
  flex-direction: column;
}
</style>

It looks to me like the 'webcam view' get injected into the body instead of the a-scene... When I load the page I see the vr icon quickly jumping from the a-scene to the right corner of the screen. I really hope you can help me out :).

[OnlyAGhost]

Sorry it took me a minute to respond!!

Now I am using the three.js version so it's a bit different. I had the same problem that it was loading the webcam video in the background.

What I ended up doing was the following:
var texture = new THREE.VideoTexture( (bezl.vars.artoolkitsrc.domElement) );
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
bezl.vars.scene.background = texture;

So basically I created a video texture from the video dom element that gets created and then I added that new video texture as the background to my scene. But this is specific to the three.js version and not the a-frame version.

[AndiDomi]

@idmick Could you make it run in the end?
Because I am facing the exact same problem where the video frame takes over everything even tho is not rendered by using v-if in vue.js

[floxo115]

did somebody solve this problem?

[AndiDomi]

@floxo115 what I did was to create programatically a vue.js component with a v-if in it and then inside that component create an iframe to render ar.js. When you kill the component the iframe will disappear. Dirty trick but effective ...

[RaminGe]

Hey,

is there a way to get this done without the "dirty" way from @OnlyAGhost or the iframe version?
I am trying to implement AR.js in my angular webapp but I didn't find a good solution to get it in my custom div or canvas.
As this issue is older than a year I am hoping that someone found a solution..