0

I've been trying to implement AR.js in Angular 6 but I cant seem to get it working.
I've implemented A-frame using this guide here: https://medium.com/@pitipon/a-frame-with-angular-setup-project-5797b2f2a03b

Even with aframe seemingly working I cant really get ar.js to work. I've tried just adding it in the index.html as some people have done but that doesnt properly work for me either. I've also tried to install it with npm install and adding it to scripts in angular.json but none of it seems to help.

this is my app.component.html:

<a-scene embedded arjs='sourceType: webcam;'>
  <a-marker preset='hiro'>
  <a-box position="0 0.5 0" rotation="0 45 0" color="#4CC3D9"></a-box>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>

my index.html is just the default now since adding the scripts there didnt seem to work.

I can get the webcam to work by adding the scripts into the index.html and placing what would be in app.component.html right in the body instead of app-root but then it just fills my console with errors and fails to detect anything.

I just cant seem to get it to work. If anyone could tell me how they managed to do it I'd very much appreciate that.

Baastl
  • 23
  • 1
  • 5
  • are you getting any error? https://github.com/jeromeetienne/AR.js/issues/379 Check whether this link heps – Suresh Kumar Ariya Oct 15 '18 at 14:59
  • I always get a zone.js error due to aframe but it doesnt seem to prevent aframe from working as intended. I also get a ton of errors if I put the scripts and a-scene just into index.html which I currently dont. Im not too worried about those errors tho since I dont think that that way of implementing AR.js is usefull to some of the things I plan on doing with it. Also sadly I've tried the solution from eagor in that issue and it hasnt worked either. – Baastl Oct 16 '18 at 06:31
  • The zone.js error is this btw: "Uncaught DOMException: Failed to execute 'registerElement' on 'Document': Registration failed for type 'a-node'. A type with that name is already registered." – Baastl Oct 16 '18 at 06:32

1 Answers1

0

Alright so the issue seems to be the way I imported Aframe. Do not follow the guide I linked if you do ar.js seems to not work even tho Aframe will. Instead just add the scripts in the head in index.html and then import CUSTOM_ELEMENTS_SCHEMA from @angular/core in app.module.ts and put it in schemas: [] under bootstrap in @NgModule.

Baastl
  • 23
  • 1
  • 5