Changing css or making a-scene embedded destroys all entities

[Platform-Group]

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

Bug

What is the current behavior?

If you try to change the CSS of say, the video to try and fix the camera stretching:

document.querySelector('video').setAttribute('style', 'width: 100vw;height: 100vh;object-fit: cover;position: absolute;top: 0;left: 0;');

Or you simply want your scene to be embedded:

<a-scene
    embedded
    vr-mode-ui="enabled: false"
    arjs="sourceType: webcam; videoTexture: true; debugUIEnabled: false"
    renderer="antialias: true; alpha: true"
>

Or you want to manually rotate all of your entities to calibrate true north since devices always get it slightly wrong:

      AFRAME.registerComponent("calibrate-orientation", {
        init: function () {
          this.el.addEventListener("click", function (ev, target) {
            console.log('clicked')
            // var rotation = this.el.getAttribute("rotation");
            // rotation.y = 0.1;
            // this.el.setAttribute("rotation", rotation);
            // el.object3D.rotation.set(
            //   THREE.MathUtils.degToRad(0),
            //   THREE.MathUtils.degToRad(10),
            //   THREE.MathUtils.degToRad(0)
            // );
            // OR
            // el.object3D.rotation.x += Math.PI;
            // OR
            const rotateElement = document.querySelector("#rotatable");
            rotateElement.setAttribute('rotation', {x: 0, y: 10, z: 0});
          });
        },
      });

All entities vanish, no errors in the console

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

Just did

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

Happens on all devices I've tried

What is the expected behavior?

Entities don't vanish

[nickw1]

Thanks for this, there are some problems with embedded with videoTexture set to true, in the sense that they are not compatible.

I should be able to fix this however I cannot promise a timescale right now.

[Platform-Group]

@nickw1 don't suppose you know how I can work around the rotation issue? I need to implement some buttons or a slider to manually fix inaccuracies with the compass

[nickw1]

@Platform-Group to avoid the use of embedded you can always overlay your buttons on the a-scene by giving them a higher z-index and absolutely-positioning them.

See this example, for instance: https://github.com/AR-js-org/AR.js/blob/master/aframe/examples/new-location-based/basic-js/index.html

This overlays a very basic UI on the a-scene.

Not sure why changing the CSS destroys the entities, will need to look into this (again, no promised timescale, will do when/if I can)

[Platform-Group]

@nickw1 I have buttons, the issue was I can't currently rotate entities on the fly with the code I have in my original post. I've been messing with look-controls though to get around the issue

My other issue is that I want to fix is the camera stretching, being able to embed the camera or change the css would help me to do that. See this code which would solve that if it wasn't for entities vanishing.

[Platform-Group]

I've also noticed that if you remove videoTexture: true from the arjs attribute on the a-scene, then the embedded attribute is seemingly ignored and goes fullscreen anyway.

Also sourceWidth, sourceHeight, displayWidth, and displayHeight don't seem to do anything?