Problem in camera view

Questions
1

hello guys,
i working on three.js scene were camera rotate as per device orientation the problem is device is rotating the object in front of camera is moving properly but at some angle its goes to one side and quick appear to another side i am also sharing the code please fix it

import * as THREE from "three"

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

let adjust, adjust_alpha;

function handleDeviceOrientation(event) {
    const alpha = event.alpha ? THREE.MathUtils.degToRad(event.alpha) : 0; // Z axis
    const beta = event.beta ? THREE.MathUtils.degToRad(event.beta) : 0; // X axis
    const gamma = event.gamma ? THREE.MathUtils.degToRad(event.gamma) : 0; // Y axis

    if (typeof adjust === 'undefined') {
        adjust = beta;
        adjust_alpha = alpha;
    }

    const adjustedBeta = beta - adjust;
    const adjustedAlpha = alpha - adjust_alpha;
    
    const euler = new THREE.Euler(adjustedBeta, adjustedAlpha, 0, 'YXZ');
    const quaternion = new THREE.Quaternion().setFromEuler(euler);

    camera.quaternion.copy(quaternion);
}

window.addEventListener('deviceorientation', handleDeviceOrientation, true);

const animate = function () {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
};

animate();

window.addEventListener('resize', function () {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    constraints.video.width = window.innerWidth
    constraints.video.width = window.innerHeight

}, false);



const constraints = {
    video: {
      facingMode: { exact: "environment" } 
      ,width: window.innerWidth
      ,height: window.innerHeight
    }
  };
  

  navigator.mediaDevices.getUserMedia(constraints)
    .then((stream) => {
     
      const video = document.createElement('video');
  
      video.controls = false;
      video.style.width = '100%';
      video.style.height = '100%';
      video.srcObject = stream;
      video.play();

      document.body.appendChild(video)
      })
2

Why are you handling device orientation manually instead of just unlocking both landscape and portrait viewport?

3

you don’t understand what i want its like AR i know their is package for it webXR i have to make from scratch, if you have any kind of solution please reply