Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AR.js with new ES6 standard and npm package #234

Closed
kalwalt opened this issue Mar 30, 2021 · 56 comments
Closed

AR.js with new ES6 standard and npm package #234

kalwalt opened this issue Mar 30, 2021 · 56 comments
Assignees
Labels
enhancement New feature or request ES6 module AR.js as a ES6 module

Comments

@kalwalt
Copy link
Member

kalwalt commented Mar 30, 2021

🧑‍🏭 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. 🙂

@kalwalt kalwalt added enhancement New feature or request ES6 module AR.js as a ES6 module labels Mar 30, 2021
@kalwalt kalwalt pinned this issue Mar 30, 2021
@kalwalt kalwalt self-assigned this Mar 31, 2021
@LucaJunge
Copy link

LucaJunge commented Apr 5, 2021

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
Copy link

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
Copy link
Member Author

kalwalt commented Apr 5, 2021

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
Copy link
Member Author

kalwalt commented Apr 5, 2021

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
Copy link

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
Copy link

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
Copy link
Member Author

kalwalt commented Apr 6, 2021

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
Copy link
Member Author

kalwalt commented Apr 19, 2021

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

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

@karltaylor
Copy link

I'd like to help with developing the Typescript types to get intellisense when working in vscode. What is the best way to approach and contribute?

Is it worth forking this project and building a types.d.ts? I would assume this could then get ported over to https://definitelytyped.org/

@kalwalt
Copy link
Member Author

kalwalt commented May 10, 2021

I'd like to help with developing the Typescript types to get intellisense when working in vscode. What is the best way to approach and contribute?

Is it worth forking this project and building a types.d.ts? I would assume this could then get ported over to https://definitelytyped.org/

Hi @karltaylor you are welcome! May we discuss this in another issue? i can say that first it would require to develop the artoolkit5-js version and then the typed AR.js version.

@Zaniyar
Copy link

Zaniyar commented Sep 7, 2021

Any progress about npm package yet?

I tried this in my react app:

import * as THREE from "three";
import { ArToolkitProfile, ArToolkitSource, ArToolkitContext, ArMarkerControls} from 'ar-js-org/three.js/build/ar-threex.js';

added this to my package.json:
"ar-js-org": "https://github.com/AR-js-org/AR.js.git#aaad9847f67a4738b00724c38d9f501d78e0a8af",

ERROR

ReferenceError: THREE is not defined
(anonymous function)
/project/react-ar/node_modules/ar-js-org/three.js/build/ar.js:1669
1666 |
1667 | THREEx.ArBaseControls.id = 0
1668 |

1669 | Object.assign( THREEx.ArBaseControls.prototype, THREE.EventDispatcher.prototype );
1670 |
1671 | //////////////////////////////////////////////////////////////////////////////
1672 | // Functions

Fixed:

=> First of all look that you change from the master branch to ES6 branch and copy the commit #hash from there for your package.json:

"ar-js-org": "https://github.com/AR-js-org/AR.js.git#90e83dc4003aa1980b242014b3ca054effed8edf",
=> Second do import ar-threex.js from the build (not the ar.js) like this:

import * as THREEx from 'ar-js-org/three.js/build/ar-threex';
rest stays the same.

@thauska
Copy link
Member

thauska commented Oct 28, 2021

I've one question: is the ES6 branch recommended to use with A-Frame?

@thauska
Copy link
Member

thauska commented Oct 31, 2021

Hi everyone,

I made this example, integrating A-Frame + AR.js with Vue.js using Quasar Framework.

source-code: https://github.com/thauska/peticov-ar
live example: https://thauska.github.io/peticov-ar/

@kalwalt
Copy link
Member Author

kalwalt commented Oct 31, 2021

Hi everyone,

I made this example, integrating A-Frame + AR.js with Vue.js using Quasar Framework.

source-code: https://github.com/thauska/peticov-ar
live example: https://thauska.github.io/peticov-ar/

Thank you @thauska for sharing!

@kalwalt
Copy link
Member Author

kalwalt commented Nov 2, 2021

@thauska it seems that the aframe version works fine. Just got back from holidays, i have did some quick test with your vue App, so i would to know if you tried with different Mobile devices and how is responding. Last time i tried the basic aframe examples (not importing with npm) i had bad results, because some css issues. If we solve these last, we can think to publish a first raw beta npm package.

@thauska
Copy link
Member

thauska commented Nov 3, 2021

@kalwalt I've test it with:
Samsung A70 and Chrome browser
iPhone 11 and Safari
Mi Note 10 and Chrome
LG Q6 and Chrome

The only issue is with the PNG file with transparent shader. It seems like he get lost to set the position on the marker sometimes.

@kalwalt
Copy link
Member Author

kalwalt commented Nov 3, 2021

@kalwalt I've test it with: Samsung A70 and Chrome browser iPhone 11 and Safari Mi Note 10 and Chrome LG Q6 and Chrome

ok thank you!

The only issue is with the PNG file with transparent shader. It seems like he get lost to set the position on the marker sometimes.

You mean that it get lost the PNG?

@thauska
Copy link
Member

thauska commented Nov 3, 2021

video_2021-11-03_08-37-43.mp4

@kalwalt Mi Note 10 and Chrome

@kalwalt
Copy link
Member Author

kalwalt commented Nov 3, 2021

video_2021-11-03_08-37-43.mp4
@kalwalt Mi Note 10 and Chrome

Hi @thauska i have no idea what could be the cause, but maybe we can solve it in another step.
I'm considering that we could publish a first npm package, I reviewed the code and made other tests on the ES6 branch and i don't see any reason to not publish. Of course we will encounter some issues, and also the ES6 branch need some updates before merging in the dev branch. In this way we can do some more tests.
This is my thought. 😄

@thauska
Copy link
Member

thauska commented Nov 3, 2021

video_2021-11-03_08-37-43.mp4
@kalwalt Mi Note 10 and Chrome

Hi @thauska i have no idea what could be the cause, but maybe we can solve it in another step. I'm considering that we could publish a first npm package, I reviewed the code and made other tests on the ES6 branch and i don't see any reason to not publish. Of course we will encounter some issues, and also the ES6 branch need some updates before merging in the dev branch. In this way we can do some more tests. This is my thought. 😄

This problem happens in pure HTML to, on some mobile devices. It's not an ES6 issue. I think that can publish the npm package. It seems fine. I can make some test to. Let me know the news. 🥰

@kalwalt
Copy link
Member Author

kalwalt commented Nov 3, 2021

video_2021-11-03_08-37-43.mp4
@kalwalt Mi Note 10 and Chrome

Hi @thauska i have no idea what could be the cause, but maybe we can solve it in another step. I'm considering that we could publish a first npm package, I reviewed the code and made other tests on the ES6 branch and i don't see any reason to not publish. Of course we will encounter some issues, and also the ES6 branch need some updates before merging in the dev branch. In this way we can do some more tests. This is my thought. smile

This problem happens in pure HTML to, on some mobile devices. It's not an ES6 issue. I think that can publish the npm package. It seems fine. I can make some test to. Let me know the news. smiling_face_with_three_hearts

Ok good to know! Then i will publish the first npm package.

@kalwalt
Copy link
Member Author

kalwalt commented Nov 5, 2021

We have a first npm package! See and test please: https://www.npmjs.com/package/@ar-js-org/ar.js

@kalwalt
Copy link
Member Author

kalwalt commented Nov 16, 2021

@kalwalt to confirm, some location-based examples work fine with the NPM package! Many thanks again for this.

Super! I'm going to merge it in the dev branch.

@kalwalt
Copy link
Member Author

kalwalt commented Nov 16, 2021

The ES6 branch is merged in dev! I have published a new npm beta package 3.3.3-es6-beta-02 and created a beta git tag https://github.com/AR-js-org/AR.js/releases/tag/3.3.3-es6-beta-02 though in dev i think we have a important reference.
I will start to create an issue wit a list of tasks to complete before merging into master, there are some points in the code that we need to improve and fix.

@kalwalt
Copy link
Member Author

kalwalt commented Feb 3, 2022

A new npm beta package 3.3.3-es6-beta-03 was published with the new three.js location based. Testing are welcome!

@antoniskamzel
Copy link

antoniskamzel commented Feb 4, 2022

I've tried it with the npm package with Ionic Vue but I get the a-scene as a stripe and it is not loading correctly
Code is File.vue (page) and it has a template with a div and in there is the a-scene and camera etc...
Screenshot 2022-02-04 165713

@kalwalt
Copy link
Member Author

kalwalt commented Feb 4, 2022

I've tried it with the npm package with Ionic Vue but I get the a-scene as a stripe and it is not loading correctly Code is File.vue (page) and it has a template with a div and in there is the a-scene and camera etc... Screenshot 2022-02-04 165713

Hi @antoniskamzel thank you for testing can you add some more detail? From your comment i think you tried the aframe code. In this last beta release i added only the threejs location based. Aframe still has some css issues that i didn't fixed yet; I'm not an Aframe guru so i find a bit hard to solve. Anyway @thauska made a vue example as mentioned in the top of the issue thread.

@kalwalt
Copy link
Member Author

kalwalt commented Feb 9, 2022

with #359 i think i fixed the skewing issue of meshes/models onto the markers. Can someone test the code on a mobile devices?
Examples to test:

  • three.js
    • arjs-session.html
    • minimal_ES6.html
  • aframe
    • marker-camera.html
    • marker-events.html
    • minimal_ES6.html
    • minimal.html
    • multiple-independent-markers.html
    • white-region-marker.html

@kalwalt
Copy link
Member Author

kalwalt commented Mar 3, 2022

PR #359 has been merged in dev branch and a new npm beta package has been published: 3.3.3-es6-beta-04 !!

@kalwalt
Copy link
Member Author

kalwalt commented Mar 8, 2022

Now the ES6 feature is in master now! new release 3.4.0-alpha-rc1 with new npm pkg. If i can, will update my examples linked in this page.

@kalwalt
Copy link
Member Author

kalwalt commented Mar 24, 2022

New release 3.4.0-alpha-rc2 is out!

@kalwalt
Copy link
Member Author

kalwalt commented Apr 28, 2022

Because ES6 feature is merged, we can close this issue. Please open a specific issue if you encounter a new one.

@kalwalt kalwalt closed this as completed Apr 28, 2022
@kalwalt kalwalt unpinned this issue Apr 28, 2022
@gelinger777
Copy link

@kalwalt sorry to comment it here, but is this possible to use for a GEO based AR ? I want to show some POI sign with text on buildings based on their lon/lat possition and position of the phone itself...

@kalwalt
Copy link
Member Author

kalwalt commented May 16, 2022

@kalwalt sorry to comment it here, but is this possible to use for a GEO based AR ? I want to show some POI sign with text on buildings based on their lon/lat possition and position of the phone itself...

Yes of course, look at location based version, now there are for both three.js and aframe. Please, If you have a specific issue open a new one.

@nickw1
Copy link
Collaborator

nickw1 commented May 22, 2022

@gelinger777 specifically look at these examples:

A-Frame: https://github.com/AR-js-org/AR.js/tree/master/aframe/examples/new-location-based

three.js: https://github.com/AR-js-org/AR.js/tree/master/three.js/examples/location-based

As @kalwalt says, if you have problems after looking at these examples, please open a new issue.

@exagyde
Copy link

exagyde commented May 24, 2022

Hi, do you have any example to use the npm package of AR.js with an basic node.js application (I only use Express framework for routing) ?

@nickw1
Copy link
Collaborator

nickw1 commented May 25, 2022

HI @exagyde I do have a Node/Express-driven application which uses AR.js, though it doesn't currently use the npm package. Nonetheless it could be updated fairly easily to do so.

It's the Hikar webapp (see https://hikar.org), available at https://github.com/nickw1/hikar.js

Not sure if it's what you're looking for but might be useful.

Incidentally the Discussions tab is probably the best place to ask this, as this is now a closed issue and might not get so much attention.

@gelinger777
Copy link

sorry again to flood this closed ticket. First of all thank you very much @nickw1 for pointing out to those two examples. My actual problem is that I want to integrate this into an ionic based mobile app. We use Angular flavour of Ionic for the app. My main problem is that a) how to properly initialize the scene and other elements b) to understand which version to use aframe or threejs? Which one would better be in terms of npm packages, initializations and co .

Basically what we want to achieve is something similar to the demo image of AR.js (second demo in the middle)
https://ar-js-org.github.io/AR.js-Docs/intro-image.gif

@yoavmil
Copy link

yoavmil commented Jun 27, 2022

I am also looking for a working Angular example.

@commentatorboy
Copy link

Hello guys. I tried to make it work with Vue as well with the new npm package.
@LucaJunge I used a slightly different approach and tried to implement the hiro example in the readme.

I got it to work as well, but only if you set it in VR mode.
You can checkout the example here.
https://github.com/commentatorboy/ARJSVue

@kalwalt
Copy link
Member Author

kalwalt commented Jan 16, 2023

Hello guys. I tried to make it work with Vue as well with the new npm package. @LucaJunge I used a slightly different approach and tried to implement the hiro example in the readme.

I got it to work as well, but only if you set it in VR mode. You can checkout the example here. https://github.com/commentatorboy/ARJSVue

@commentatorboy i'm working to add type definitions to AR.js see this PR #506 If this can help.

@commentatorboy
Copy link

commentatorboy commented Jan 17, 2023

Hello guys. I tried to make it work with Vue as well with the new npm package. @LucaJunge I used a slightly different approach and tried to implement the hiro example in the readme.
I got it to work as well, but only if you set it in VR mode. You can checkout the example here. https://github.com/commentatorboy/ARJSVue

@commentatorboy i'm working to add type definitions to AR.js see this PR #506 If this can help.

Hey @kalwalt I tried the following:
npm uninstall @ar-js-org/ar.js
npm install "https://github.com/AR-js-org/AR.js.git#feature-type-definitions" --save
Then ran my vue project.

Unfortunately still the same issue :/
Or if I am doing anything wrong please let me know :)

@kalwalt
Copy link
Member Author

kalwalt commented Jan 17, 2023

Thank you @commentatorboy to test it, may we discuss this in #506 ? can you add a comment describing the issue? 😄

@sdmrf
Copy link

sdmrf commented Sep 18, 2023

Hey there,

I've been experimenting with A-Frame and AR.js in a React environment, and it seems to be working. However, I'd like to confirm if this is the correct way to integrate AR.js with React.

Is there any official integration or guidance available for using AR.js with React, or has anyone else in the community tried this approach and can provide some insights?

I'd appreciate it if someone could check my setup and offer any feedback or suggestions. If needed, I can share the code and an image to provide more context.

Thanks in advance! 😊
practice-ar

@kalwalt
Copy link
Member Author

kalwalt commented Oct 3, 2023

Hey there,

I've been experimenting with A-Frame and AR.js in a React environment, and it seems to be working. However, I'd like to confirm if this is the correct way to integrate AR.js with React.

Is there any official integration or guidance available for using AR.js with React, or has anyone else in the community tried this approach and can provide some insights?

I'd appreciate it if someone could check my setup and offer any feedback or suggestions. If needed, I can share the code and an image to provide more context.

Thanks in advance! 😊 practice-ar

Hi @sdmrf actually i don't think there is an official documentation about how to integrate AR.js with React, but as i know there is a github project by @j-era https://github.com/artcom/react-three-arjs maybe will help you, it will be nice if you open a AR.js/discussion to keep track of this specific topic. 🙂

@sdmrf
Copy link

sdmrf commented Oct 10, 2023

Hey there,
I've been experimenting with A-Frame and AR.js in a React environment, and it seems to be working. However, I'd like to confirm if this is the correct way to integrate AR.js with React.
Is there any official integration or guidance available for using AR.js with React, or has anyone else in the community tried this approach and can provide some insights?
I'd appreciate it if someone could check my setup and offer any feedback or suggestions. If needed, I can share the code and an image to provide more context.
Thanks in advance! 😊 practice-ar

Hi @sdmrf actually i don't think there is an official documentation about how to integrate AR.js with React, but as i know there is a github project by @j-era https://github.com/artcom/react-three-arjs maybe will help you, it will be nice if you open a AR.js/discussion to keep track of this specific topic. 🙂

I understand that there is no official documentation available for AR.js. However, I have successfully integrated AR.js with React.js. I would like to confirm if the integration has been done correctly. As evidenced by the screenshot above, it is implemented within React using AR.js.

@leleshuo
Copy link

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?


It works in development mode, but goes white once it's packaged for production

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request ES6 module AR.js as a ES6 module
Projects
None yet
Development

No branches or pull requests