Ar.js: Use AR.js in Angular Component

Created on 10 Jul 2018 · 13Comments · Source: jeromeetienne/AR.js

Hi,
I have to implement an application in Angular 5 and I'm having difficulty using an a-frame scene (that embeds arjs) in an Angular Component.

The scenes of aframe work, but when I embeds arjs does not open the camera.

I have imported aframe following this guide:

https://medium.com/@pitipon/a-frame-with-angular-setup-project-5797b2f2a03b

and

I have imported aframe-ar.js in index.html

Can someone help me?

integration

Source

martynha

👍1

Most helpful comment

I don't think you need anything special to get it to run inside Angular. This works for me:

Generate a new Angular 6 app with angular-cli
In src/app/index.html add this at the bottom of the <head> section:

  <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.js"> </script>

In src/app/app.module.ts import CUSTOM_ELEMENTS_SCHEMA and add a schemas key to the NgModule directive

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

Replace the contents of src/app/app.component.html with

<a-scene embedded arjs>
  <a-marker preset="hiro">
          <a-box position='0 0.5 0' material='color: black;'></a-box>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>

Run the app with npm start

Incidentally, I used ngrok to publish my localhost online as https and browse to it from my phone. It gave a NotAllowedError trying to access the camera over http.

jsebrech on 17 Oct 2018

❤6 🎉3 👍2

All 13 comments

related to https://github.com/jeromeetienne/AR.js/issues/364. I can't help you as I never tried AR.js on Angular, maybe @jeromeetienne can

nicolocarpignoli on 11 Jul 2018

Is there a way to use arjstoolkit in angularjs without a frame?

reto88 on 13 Jul 2018

@reto88 If you want to use this library in a pure JS way, you can find some examples in path "/three.js/examples/". In my opinion, Angular/Angularjs can integrate any content implemented in pure JS mode.

shawn-li-bj on 13 Jul 2018

@reto88 For many more pure JS examples, check out https://stemkoski.github.io/AR-Examples/ & https://github.com/stemkoski/AR-Examples .

stemkoski on 13 Jul 2018

👍1

@stemkoski thank you for this nice example.did you already used ar.js in a framework like angular or react?

reto88 on 13 Jul 2018

👍4

@reto88 you need aframe loaded before zone.js, and to achieve this I've found 2 options so far:

add the links to the aframe and arjs in index.html (so that they come before polyfills.js)

move zone.js from polyfills to scripts, and load aframe and arjs in scripts before it:

angular.json:

"scripts": [
  "node_modules/aframe/dist/aframe-master.js",
  "node_modules/ar.js/aframe/build/aframe-ar.js",
  "node_modules/zone.js/dist/zone.js"
]

in polyfills.ts comment out the import of zone.js

not sure if the 2nd options might cause some problems in future, but seems to work ok so far.

eagor on 7 Oct 2018

👍2

@eagor thanks for your answer, do you have a running example with aframe-ar and angular 6?

reto88 on 9 Oct 2018

None of these solutions seem to work for me on Angular 6. I've importet A-frame the same way as @martynha did but even with ar.js in my index.html it doesnt seem to work.
Does anyone have a working expample of ar.js in angular 6 because it seems nomatter what I try I cant get it to work.

BastianNotter on 15 Oct 2018

I don't think you need anything special to get it to run inside Angular. This works for me:

Generate a new Angular 6 app with angular-cli
In src/app/index.html add this at the bottom of the <head> section:

  <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.js"> </script>

In src/app/app.module.ts import CUSTOM_ELEMENTS_SCHEMA and add a schemas key to the NgModule directive

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

Replace the contents of src/app/app.component.html with

<a-scene embedded arjs>
  <a-marker preset="hiro">
          <a-box position='0 0.5 0' material='color: black;'></a-box>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>

Run the app with npm start

Incidentally, I used ngrok to publish my localhost online as https and browse to it from my phone. It gave a NotAllowedError trying to access the camera over http.

jsebrech on 17 Oct 2018

❤6 🎉3 👍2

Well fuck that works for me too. I guess if you import Aframe the way the guide tells you to ar.js isnt gonna work instead. How odd.
By the guide I mean this one https://medium.com/@pitipon/a-frame-with-angular-setup-project-5797b2f2a03b

Thanks a lot @jsebrech !

BastianNotter on 17 Oct 2018

polyfills.ts gets appended to the bottom of the <body> so ar.js and aframe load out of order that way. You could fix it by doing lazy loading of ar.js by appending a script tag to the body after the angular app initializes, but then you would have to wait until ar.js loads before the main app view can be bootstrapped, which would complicate things.

Realistically either you load both from URL with blocking script tags, or you load both from npm through the polyfills approach.

jsebrech on 17 Oct 2018

thanks, it works. do anyone now how you get the context of the a-frame canvas? in the dev mode of google chrome i can see a-canvas class but no id to get the context.
<canvas class="a-canvas" data-aframe-canvas="true" width="1920" height="1440" style="width: 1536px; height: 1152px;"></canvas>
I would like to have something like var ctx = canvas.getContext('2d');

reto88 on 19 Oct 2018

you can access it this way:
const scene = document.querySelector('a-scene');
const canvas = scene.components.screenshot.getCanvas('perspective');