Location based aframe: camera feed stretching/quality or FOV issue

[Platform-Group]

Do you want to request a feature or report a bug?

Bug most likely, as without this I believe the whole concept of location based AR doesn't work accurately unless the camera is pointed directly at the AR entity.

What is the current behavior?

You can set fov directly on the a-camera element or use something like the following if you wanted to add code around changing the fov such as changing on click or on screen orientation change:

      AFRAME.registerComponent("fov-change", {
        init: function () {
          // grab the camera
          const cam = document.querySelector("[camera]");
          // this.el should also work for this as long as your fov-change component is on the camera
          // grab the current FOV, this will be 80 as that's the default for aframe
          const fov = cam.getAttribute("camera").fov;
          console.log("old ", fov);
          // update the camera with the new FOV
          // if holding portrait use 61:
          // cam.setAttribute("camera", "fov", 61)

          // For landscape
          cam.setAttribute("camera", "fov", 45);
          console.log("new ", fov);
        },
      });

This allows for adjustment to ensure entities are horizontally in the correct positions at the edges of the camera's view. However it seems that then vertical positioning of elements isn't aligned as the camera has a different FOV horizontally as it does vertically. So I've tweaked the FOV enough that entities are horizontally positioned correctly, but tilting the camera up and down shifts the entities locations incorrectly.

I would have thought that this is a bug of aframe as a result, as these are aframe settings. However I don't believe the fov is the real culprit here. Although I will note that the FOV value is very clearly broken as I used some trig to measure my horizontal FOV as being 130 and yet I need a value of 61 to have entities correctly align horizontally.

I believe this is the real culprit: I noticed that the camera quality is just awful compared to the native camera app, and if I change the size of my browser I notice that I can adjust the camera feed. It seems that the camera feed is being stretched to fit within the browser, and I suspect that's the reason for the issues I'm seeing. After all, it seems that despite the camera's FOV not changing as you stretch it in any direction, the entities don't move with the camera stretch.

If the current behavior is a bug, please provide the steps to reproduce.

Use a simple aframe location based example, drop a scaled up entity on a distant landmark. Point the camera directly at the entity and note its real world position, turn your camera so the entity is seen at the very side of the camera, do this for all 4 sides and corners, notice how the entity's real world position changes as you move the camera. As mentioned in the previous section, adjusting FOV allows you to fix this for one axis but not both.

I recommend using simulated latitude, longitude, and altitude and disabling location services; this is because phone compasses are very inaccurate, and simulating your position allows you to drag on the screen to change 'north' on safari (note that this doesn't seem to work on chrome or firefox?).

In these screenshots, notice how much lower the BT Tower pin is when the camera is orientated to point downwards.

Please mention other relevant information such as the browser version, Operating System and Device Name

Testing this using Safari on a 10th gen iPad primarily. However I also observed the same issue on my Poco F5

What is the expected behavior?

Entities maintain real world positions despite camera orientation, and ideally the camera quality isn't lowered so much.