search

jeromeetienne / AR.js

Efficient Augmented Reality for the Web - 60fps on mobile!
MIT License
15.8k stars 2.22k forks source link

AR.js not working anymore? Hiro and Barcode markers not recognised #523

Closed EdieJoMurray closed 5 years ago

EdieJoMurray commented 5 years ago

I have used AR.js a lot in the past, but now the same code that used to work appears to no longer be working.

I started with this code:

<a-scene embedded arjs='sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3; debugUIEnabled: false;'>
        <!-- handle 1 marker -->
        <a-marker type='barcode' value='1'>
            <a-gltf-model src="./figure/BoomBox.glb"  scale="0.5 0.5 0.5"></a-gltf-model>
        </a-marker>
        <!-- add a simple camera -->
        <a-entity camera></a-entity>
    </a-scene>

and the camera was not recognising the marker, so I went all the way back to the original code and using a hiro marker: https://aframe.io/blog/arjs/

But that didn't work still, so I tried the code here: https://github.com/jeromeetienne/AR.js/issues/492

But that didn't work either.

This 'working example' doesn't work (for me at least): https://glitch.com/~actually-macaroon

The only version currently working for me appears to be the playground: https://webxr.io/webar-playground/app/

Can someone help? What is different about the playground example that means it is recognising the hiro marker and none of the others are for me? The rest of the code works - the camera is triggered, and I can see the scene in the inspector.

Many thanks in advance for any help.

kalwalt commented 5 years ago

Hi @EdieJoMurray can you share more of your code? especially how do you include your aframe.js and aframe-ar.js libs, browser and a print of your console log maybe can help. That code ( the last two at least ) works fine for me. I think the problem is not related to that code. If you have a testing repo will be super.

EdieJoMurray commented 5 years ago

Thank you for your reply!

The most simple file I have that's not working is https://ediejomurray.co.uk/secretknock/hiro.html

<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='sourceType: webcam;'>
                <a-marker preset='hiro'>
                    <a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
                 </a-marker>
                 <a-entity camera> </a-entity>
    </a-scene>
</body>

That's what I've just been testing out to try and get the basics working.

The longer test that I started with is at https://ediejomurray.co.uk/secretknock/

<!DOCTYPE html>
<head>
<title>Secret Knock</title>

<!-- include a-frame -->
<script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
<!-- include ar.js for aframe -->
<script src='./aframe-ar.js'></script>
<script>ARjs.Context.baseURL = './three.js/'</script>

</head>

<!-- start the body of your page -->
<body style='margin : 0px; overflow: hidden;'>
    <!-- add some info at the top of the page -->
    <div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1;'>
    </div>

    <!-- Define your 3d scene and enabled ar.js -->
    <a-scene embedded arjs='sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3; debugUIEnabled: false;'>

        <a-assets>
            <a-asset-item id="figure" src="./figure/BoomBox.glb"></a-asset-item>
          </a-assets>

        <!-- handle 1 marker -->
        <a-marker type='barcode' value='1'>
            <a-entity gltf-model="#figure" scale="1 1 1"></a-entity>
        </a-marker>

        <!-- handle 2 marker -->
        <a-marker type='barcode' value='2'>
            <a-sphere radius="1.25" color="#EF2D5E"></a-sphere>
        </a-marker>

        <!-- add a simple camera -->
        <a-entity camera></a-entity>

    </a-scene>
</body>

If you find either of these is working for you please let me know - it might just be me!!

PS this is testing it in Chrome on Mac and Safari on iOS

kalwalt commented 5 years ago

@EdieJoMurray I can not test the second example at the moment but i can confirm that the first basic example is working very well. It works also without running the http server. Maybe an issue with the browser used? Try to delete the browser cache and restarting the pc.

EdieJoMurray commented 5 years ago

@kalwalt you are absolutely right - I just tried it in firefox as opposed to chrome and it works, that's really helpful thanks so much for testing it.

The other one still isn't working, so now I need to work out what the issue is there!

commentatorboy commented 5 years ago

It might be a https issue. Try and look in the console log. Does it have any warnings or errors?

nicolocarpignoli commented 5 years ago

I see no relevant bug or issue here. Please reopen if found the cause or a bug

cnadolny2s commented 5 years ago

Sadly it's still not working. Tested the basic example from above. Camera starts (fully zoomed, another issue) Marker gets not detected in Chrome 77 and Chrome for Android. Although it works in Firefox.

nicolocarpignoli commented 5 years ago

please share your code and chrome developer console screenshot

cnadolny2s commented 5 years ago 
<html>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/1.7.7/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
    <a-marker preset="hiro">
        <a-box position='0 0.5 0' material='color: yellow;'></a-box>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>
</body>
</html>

demo

nicolocarpignoli commented 5 years ago

you are serving this HTML from file system (I guess you opened it double-clicking on file from the file system). Look at the error on the screenshot, at the top ("A-FRAME:error").

You have to serve this file using a server (also local) via https.

andymalone commented 5 years ago

It looks like you are getting a CORS error there. Have you tried putting it on a web server (ideally https://)?

EDIT: As above. I ran into a few things running locally too so have been developing our latest project remotely on an external web server.

cnadolny2s commented 5 years ago

You were right @nicolocarpignoli I served it first from file system. But I tried it also within a fresh Create React App project from within my IDE and running the App: No marker detection.

@andymalone I deployed that React app now on netlify (which has ssl): https://arjs-react-eval.netlify.com/

Also no marker detection, but the camera zoom is gone now for some reason. You should be able to check the sourcemaps in your dev tools.

nicolocarpignoli commented 5 years ago

Using AR.js with React is still not straightforward like one may think.

Here we are trying to collect all we have learnt using it with JS frameworks.

If you just run the AR.js app on a separate page, hosted on a server, it will surely works. If you want anyway to use it from React, without dive into debugging and the issue I posted above, you could simply instantiate an iframe with camera permissions, that loads the AR.js app.

I know it's far from perfect, considering also this breaks the 'component thinking' of React, but if you want a quick solution you can try this way.

cnadolny2s commented 5 years ago

Thanks for pointing out the other thread, although I went through almost all attempts posted over there but none of them did the job for me.

Yes, I can confirm that running it on a separate page, without any React stuff, works. Ok, I will try the iframe idea. Thanks for the support, guys.

senseijames commented 5 years ago

This is still a major issue. Just like @EdieJoMurray originally wrote, marker detection is basically broken. The demo app at https://webxr.io/webar-playground/app/ works like a dream, but even a simple example using the latest version of the library is completely non-functional.

Why was this issue closed?

nicolocarpignoli commented 5 years ago

@senseijames please share an URL that for you does not work, also if you can please attach your console of chrome devtools so I can check. It may be a problem related to the ones cited above.

senseijames commented 5 years ago

@nicolocarpignoli thanks for your quick reply! Oddly enough it works very well standalone (https://codepen.io/sensei/pen/VwwaYxa?editors=1010) but when I use this in an Angular application, and iframe in the content (like so: joshmorony.com/augmented-reality-in-an-ionic-angular-pwa/) I can't get the scene to render with the latest version of AR.js and A-Frame! (Only the previous, commented out versions of the libraries in my CodePen, will work.)

Note that it works fine when i nav to that standalone page (in my Angular app) without iframing in the page.

Any thoughts on why that might be?

Now, however, I'm facing a different issue; how to keep the scene static, fixed on the marker image, while I move the camera around. This is essential for my application! Any help would be most appreciated!

(Following up quickly, I do see this link: https://github.com/jeromeetienne/AR.js/issues/313; TRYING!)

senseijames commented 5 years ago

Now I'm having trouble just getting a marker to render in a simple Geolocation POC.

https://codepen.io/sensei/pen/rNNzamg

Thoughts? My JS code isn't even running, looks like.

nicolocarpignoli commented 5 years ago

please use latest AR.js (2.0.5 or above) as on older versions there was a bug in loading static places for geolocation ar