0

I am using the simple arjs example to my angular project but i cannot get any results using the hiro marker.

This is the code:

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

When I point my smartphone to a hiro marker nothing happens.

Is this because my device is not supporting AR? I have a Xiaomi redmi note 6 pro.

I read that in order for the AR to work on the device I need to have AR Google services which are not supported by my device.

Does arjs need AR google services in order to work? If not what are the other reasons?

PS.

  1. I am on https and the camera is open.
  2. I am on an angular project and I am importing the scripts on the index.html head

these are the scripts:

  <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>
Jonathan Leffler
  • 730,956
  • 141
  • 904
  • 1,278
Iraklis Bekiaris
  • 1,163
  • 15
  • 43

1 Answers1

0

As Far As I Know arjs does not need AR Google Services in order to work

I think the problem is you need to put the your object, which is <a-box>, inside the <a-marker>

Try:

<!DOCTYPE html>
<html>
    <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
    <!-- we import arjs version without NFT but with marker + location based support -->
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/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='opacity: 0.5;'></a-box>
            </a-marker>
           <a-entity camera></a-entity>
        </a-scene>
    </body>
</html>

You can also see another example here: https://github.com/AR-js-org/AR.js/

jef
  • 536
  • 1
  • 4
  • 14