Example of using MindAR in React
This is an example project of using MindAR in React
The react components are:
src/mindar-viewer (AFRAME version), andsrc/mindar-three-viewer (ThreeJS version).Everything else are created from create-react-app, and they are irrelevant.
 |
|---|
> npm install
> npm run start
OR for HTTPS (so you can test on mobile devices connected in local network)
> npm run start-https
I noticed while testing with dev server on my Android device that we need to force https in the start script to get the application working while testing.
"start": "HTTPS=true react-scripts start"
in package.json
I am trying to run mindar on nextjs 14, but I have not been succesful. Whetever I use AFrame or Three, I get this error:
What could it be?
Thanks
when i import these in my react project as example:
import * as three from "three";
import 'mind-ar/dist/mindar-image-three.prod.js';
import 'mind-ar/dist/mindar-image.prod.js';
import 'aframe';
import 'mind-ar/dist/mindar-image-aframe.prod.js';
i get error:
TypeError: this.util.TextEncoder is not a constructor
what should I do?
i use node version: 20.8.1
install yarn add mind-ar
i have this mistake:
error /Users/neosynmac/wa/boilerplate/boilerplate-ionic/node_modules/canvas: Command failed.
Exit code: 1
Command: node-pre-gyp install --fallback-to-build --update-binary
Arguments:
Directory: /Users/neosynmac/wa/boilerplate/boilerplate-ionic/node_modules/canvas
Output:
node-pre-gyp info it worked if it ends with ok
node-pre-gyp info using [email protected]
node-pre-gyp info using [email protected] | darwin | arm64
node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v115-darwin-unknown-arm64.tar.gz
node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v115-darwin-unknown-arm64.tar.gz
node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v115 ABI, unknown) (falling back to source compile with node-gyp)
node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.11.2/canvas-v2.11.2-node-v115-darwin-unknown-arm64.tar.gz
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | darwin | arm64
gyp info ok
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | darwin | arm64
gyp info find Python using Python version 3.12.3 found at "/Library/Frameworks/Python.framework/Versions/3.12/bin/python3"
gyp info spawn /Library/Frameworks/Python.framework/Versions/3.12/bin/python3
gyp info spawn args [
gyp info spawn args '/Users/neosynmac/.nvm/versions/node/v20.8.1/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args 'binding.gyp',
gyp info spawn args '-f',
gyp info spawn args 'make',
gyp info spawn args '-I',
gyp info spawn args '/Users/neosynmac/wa/boilerplate/boilerplate-ionic/node_modules/canvas/build/config.gypi',
gyp info spawn args '-I',
gyp info spawn args '/Users/neosynmac/.nvm/versions/node/v20.8.1/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
gyp info spawn args '-I',
gyp info spawn args '/Users/neosynmac/Library/Caches/node-gyp/20.8.1/include/node/common.gypi',
gyp info spawn args '-Dlibrary=shared_library',
gyp info spawn args '-Dvisibility=default',
gyp info spawn args '-Dnode_root_dir=/Users/neosynmac/Library/Caches/node-gyp/20.8.1',
gyp info spawn args '-Dnode_gyp_dir=/Users/neosynmac/.nvm/versions/node/v20.8.1/lib/node_modules/npm/node_modules/node-gyp',
gyp info spawn args '-Dnode_lib_file=/Users/neosynmac/Library/Caches/node-gyp/20.8.1/<(target_arch)/node.lib',
gyp info spawn args '-Dmodule_root_dir=/Users/neosynmac/wa/boilerplate/boilerplate-ionic/node_modules/canvas',
gyp info spawn args '-Dnode_engine=v8',
gyp info spawn args '--depth=.',
gyp info spawn args '--no-parallel',
gyp info spawn args '--generator-output',
gyp info spawn args 'build',
gyp info spawn args '-Goutput_dir=.'
gyp info spawn args ]
Traceback (most recent call last):
File "/Users/neosynmac/.nvm/versions/node/v20.8.1/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py", line 42, in <module>
import gyp # noqa: E402
^^^^^^^^^^
File "/Users/neosynmac/.nvm/versions/node/v20.8.1/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 9, in <module>
import gyp.input
File "/Users/neosynmac/.nvm/versions/node/v20.8.1/lib/node_modules/npm/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 19, in <module>
from distutils.version import StrictVersion
ModuleNotFoundError: No module named 'distutils'
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/Users/neosynmac/.nvm/versions/node/v20.8.1/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:325:16)
gyp ERR! stack at ChildProcess.emit (node:events:514:28)
gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:294:12)
gyp ERR! System Darwin 23.5.0
gyp ERR! command "/Users/neosynmac/.nvm/versions/node/v20.8.1/bin/node" "/Users/neosynmac/.nvm/versions/node/v20.8.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--update-binary" "--module=/Users/neosynmac/wa/boilerplate/boilerplate-ionic/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/neosynmac/wa/boilerplate/boilerplate-ionic/node_modules/canvas/build/Release" "--napi_version=9" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v115"
gyp ERR! cwd /Users/neosynmac/wa/boilerplate/boilerplate-ionic/node_modules/canvas
gyp ERR! node -v v20.8.1
gyp ERR! node-gyp -v v9.4.0
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/Users/neosynmac/.nvm/versions/node/v20.8.1/bin/node /Users/neosynmac/.nvm/versions/node/v20.8.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/Users/neosynmac/wa/boilerplate/boilerplate-ionic/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/neosynmac/wa/boilerplate/boilerplate-ionic/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v115' (1)
node-pre-gyp ERR! stack at ChildProcess.<anonymous> (/Users/neosynmac/wa/boilerplate/boilerplate-ionic/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
node-pre-gyp ERR! stack at ChildProcess.emit (node:events:514:28)
node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1105:16)
node-pre-gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:305:5)
node-pre-gyp ERR! System Darwin 23.5.0
node-pre-gyp ERR! command "/Users/neosynmac/.nvm/versions/node/v20.8.1/bin/node" "/Users/neosynmac/wa/boilerplate/boilerplate-ionic/node_modules/canvas/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--update-binary"
node-pre-gyp ERR! cwd /Users/neosynmac/wa/boilerplate/boilerplate-ionic/node_modules/canvas
node-pre-gyp ERR! node -v v20.8.1
node-pre-gyp ERR! node-pre-gyp -v v1.0.11
node-pre-gyp ERR! not ok
Failed to execute '/Users/neosynmac/.nvm/versions/node/v20.8.1/bin/node /Users/neosynmac/.nvm/versions/node/v20.8.1/lib/node_modules/npm/node_modules/node-gyp/bin/node-
Hi
Thanks for your library
I tested mind-ar & react-mind-ar, with my own different images and models I see a lot of vibration
I use "filterMinCF:0.1; filterBeta: 10" but I see vibration again
How can I solve it?
when download program and npm i show error
npm ERR! request to https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz failed, reason: certificate has expired
I get this error when using the library as npm package. Everything works fine with the HTML script.
This white screen occurs after putting this project on the server. but works fine locally. Are any additional changes required for this to show on the server?
the first picture is shown while it's on the server and the other run on my local machine. how can I run it on the server too
picture 1:
picture 2:
Hi,
Is it possible to use this library in React-native for mobile?
I wondering if is there any way to fulfill the feature Multi-Targets in React version.
it seems like the imageTargetSrc props only allow string not array
I noticed that the memory usage increases each time you stop and start the scene again. This restricts the usage of Mind AR on multi-scene projects, as it could lead to browser crashing / out of memory.
I implemented state management with Redux and passed down some props containing image URLs and some other bits of information. Image recognition hasn't worked since then.
Just noticed that arSystem.stop() does not dispose the overlays (scanning, loading...).
Since those elements are attached directly to the body's node and not to the a-scene, they would not be disposed by the react render cycle (since overlays are not a component's child). Also they are created on every setup, so showing/hidden the component will accumulate dead/hidden overlays divs in the dom.
Right now I'm removing those elements in the same useEffect return function, right before the .stop call. Like this:
arSystem.stop();
const overlays = document.getElementsByClassName('mindar-ui-overlay')
Array.from(overlays).map((e)=>{e.remove()})Is this the best way to handle it?
Thanks for the library and for this react example.
Hi,
I am using these codes with the package
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
"aframe": "^1.4.1",
"mind-ar": "^1.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^3.1.0"
}
The server side debug is
A-Frame Version: 1.4.1 (Date 2023-01-04, Commit #5183a179)
index.js:96 THREE Version (https://github.com/supermedium/three.js): ^0.147.1
index.js:98 WebVR Polyfill Version: ^0.10.12
mindar-image.prod.js:9 Uncaught ReferenceError: require is not defined
at mindar-image.prod.js:9:7
at index.js:17:1
at index.js:17:1
(anonymous) @ mindar-image.prod.js:9
(anonymous) @ index.js:17
(anonymous) @ index.js:17
DevTools failed to load source map: Could not load content for chrome-extension://pgjjikdiikihdfpoppgaidccahalehjh/webspeed.js.map: Fetch through target failed: Frame not found; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
Please guide me how to solve this issue.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.