AR.js with new ES6 standard and npm package

[kalwalt]

🧑‍🏭 ES6 feature under development

We (@MikiDi @nickw1 @nicolocarpignoli and other) are working to make this a reality see #116 . At this time it is possible to import AR.js into a React environment. You can check it in my example repo react-AR-experiments. I made a simple set up for the THREEx API in this folder react-threex-example. You need to install the dependencies with yarn follow the instructions
This is a simple example with a pattern HIRO marker,
This feaure is not yet ready, but if you want to test you are welcome.

🚚 Importing the package

At this moment we have not yet our npm repository you can import as a package in this way:
"@ar-js-org/ar.js": "https://github.com/AR-js-org/AR.js.git#<GIT_COMMIT_HASH>"
where the <GIT_COMMIT_HASH> is the latest git commit hash,

Install the package with NPM:

npm i @ar-js-org/ar.js

### ❗ Note:
You need to change <GIT_COMMIT_HASH> every time we push changes in the ES6 branch.

📦 NPM package

We will setup the npm package as soon as the code will be almost ready to be merged in the dev branch (we are working on this too...).
We have set up a NPM organization, so we will publish as a scoped package: @ar-js-org/ar.js

We have the first beta package at https://www.npmjs.com/package/@ar-js-org/ar.js.

🎮 Aframe version

I didn't yet made a working example with. I'm trying to do in react-arjs-example, but at the moment is not working properly. If you are an expert with AFRAME and React, a help is very welcome.
But @thauska made this project with Aframe-Vue https://github.com/thauska/peticov-ar if you want to test.
In addition @j-era and friends are developing react-three-arjs

📹 Live examples

There aren't Live examples yet, i will provide them soon...

Report here if you find some issues, but consider that not all the code was ported yet... and some bugs may arise. 🙂

[LucaJunge]

I sucessfully integrated AR.js in a Vue.js project and it works.

https://github.com/LucaJunge/arjs-vue

I noticed that I still get a warning:
WARNING: Multiple instances of Three.js being imported. when using import * as THREE from 'three';

It doesn't work without the THREE import however.
I also needed to tweak your example a bit:

• [in package.json]: changing the dependency from "arjs": "https://github.com/AR-js-org/AR.js.git#<GIT_COMMIT_HASH>" to "ar-js-org": "https://github.com/AR-js-org/AR.js.git#<GIT_COMMIT_HASH>"
• [in App.vue]: reflecting that "ar-js-org" change in import { ArToolkitProfile, ArToolkitSource, ArToolkitContext, ArMarkerControls} from 'ar-js-org/three.js/build/ar-threex.js';

I noticed some issues regarding the resize of the video element at load. See the comments in the ARScene.vue file for reference. Maybe that's a vue specific issue and "mounted()" is not the right point for the code. I will test that further.

Using a framework like React or Vue opens up the possibilities of using a Single Page App together with routing. AR.js does not seem to support that, as the video and canvas elements get appended to the body of the page and also change its width and height, which breaks the layout of a Single Page App. I think we should be able to select an element where the width and height of the video and canvas change according to its size, right?

[jblnco-ing]

Hi, i tried import in a Next js project, but not work, maybe by the dependencies of axios.
I'll share the code soon.

[kalwalt]

I sucessfully integrated AR.js in a Vue.js project and it works.

https://github.com/LucaJunge/arjs-vue

I noticed that I still get a warning:
WARNING: Multiple instances of Three.js being imported. when using import * as THREE from 'three';

It doesn't work without the THREE import however.

that's great! thank you for testing, and yes i also saw that multiple instances of Threejs. I left a note on the PR.

I also needed to tweak your example a bit:

• [in package.json]: changing the dependency from "arjs": "https://github.com/AR-js-org/AR.js.git#<GIT_COMMIT_HASH>" to "ar-js-org": "https://github.com/AR-js-org/AR.js.git#<GIT_COMMIT_HASH>"
• [in App.vue]: reflecting that "ar-js-org" change in import { ArToolkitProfile, ArToolkitSource, ArToolkitContext, ArMarkerControls} from 'ar-js-org/three.js/build/ar-threex.js';

why you need to do this? Anyway this is not important as we haven't yet a npm package. We will publish a beta package it when it will merged in the dev. I can say that it will be a scoped name as : @ar-js-org/ar.js because i created a npm organization.

I noticed some issues regarding the resize of the video element at load. See the comments in the ARScene.vue file for reference. Maybe that's a vue specific issue and "mounted()" is not the right point for the code. I will test that further.

It could be possible, that need more tests.

Using a framework like React or Vue opens up the possibilities of using a Single Page App together with routing. AR.js does not seem to support that, as the video and canvas elements get appended to the body of the page and also change its width and height, which breaks the layout of a Single Page App. I think we should be able to select an element where the width and height of the video and canvas change according to its size, right?

I think that will be space for more enhancement in a future PR, we should reach to an end and release it. That you question has a complete meaning.

[kalwalt]

Hi, i tried import in a Next js project, but not work, maybe by the dependencies of axios.
I'll share the code soon.

Yes post the code and some logs, thank you! 😄

[LucaJunge]

why you need to do this? Anyway this is not important as we haven't yet a npm package. We will publish a beta package it when it will merged in the dev. I can say that it will be a scoped name as : @ar-js-org/ar.js because i created a npm organization.

This wasn't really necessary, thats true, but I wanted to follow your suggestion of using the ar-js-org package name but of course, this can be freely chosen right now when pulling it directly from github.

I think that will be space for more enhancement in a future PR, we should reach to an end and release it. That you question has a complete meaning.

Yes, getting this library to work stable in ES6 at first is important. For now, I figured out a hacky workaround for Vue (and potentially React as well). I'm posting it here for anyone interested:
You can use Vues lifecycle hook beforeDestroy() that executes code before it destroys the component. The route seems to be loaded already, so calling location.reload() in there reloads the new route and therefore resets the styling of the body element and everything AR.js related. Not so elegant, but it works.

React's equivalent seems to be componentWillUnmount(), but maybe React's router works differently, so this may not work with React or this specific hook).

[jblnco-ing]

Hi, i create a new react project and import with npm this repository, but said this message:

npm i https://github.com/AR-js-org/AR.js.git#595a5c1c7020d3dd46f7082f63b5b7cca6d376e
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: 'aframe@1.2.0',
npm WARN EBADENGINE required: { node: '>= 4.6.0', npm: '^2.15.9' },
npm WARN EBADENGINE current: { node: 'v14.15.4', npm: '7.8.0' }
npm WARN EBADENGINE }
npm WARN deprecated axios@0.19.2: Critical security vulnerability fixed in v0.21
.1. For more information, see axios/axios#3410

added 59 packages, and audited 2119 packages in 42m

138 packages are looking for funding
run npm fund for details

5 vulnerabilities (2 low, 3 high)

To address issues that do not require attention, run:
npm audit fix

Some issues need review, and may require choosing
a different dependency.

Run npm audit for details.

[kalwalt]

Hi @jblnco-ing, that is strange... can you try pulling the Ar.js npm package from this this commit instead?
I have already reported to @andypotato in the PR #116 that the artoolkit5-js package need an update, (because tha axios issue and others), i hope that soon will be fixed. An alternative is fork the project in the AR.js-org and publish our scoped npm package.

[kalwalt]

@jblnco-ing have you tried again? Did you solved?

Note: npm WARN EBADENGINE could be also due to a internet connection issue...