360 Video View Snaps when Panning far left/right with Device Gyro Controls

[Adkaros]

Description

When panning the video via motion controls/device gyroscope (physically rotating phone left and right) with a 360 video player (projection: 360/Sphere/Equirectangular), the video view snaps to other side after turning about 180-200 degrees in either direction.

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

1. Go to https://videojs-vr.netlify.app/examples/360.html
2. Play video
3. Get phone that has Gyro access (must have motion controls enabled, won't work right away on iOS, android should work right away)
4. Physically rotate to your left while holding the phone until the video view snaps

Results

Expected

Video should seamlessly rotate through a full 360 range with no snapping

Actual

Video view snaps to other side of 360 projection, not allowing for a full physical rotation

Error output

If there are any errors at all, please include them here. No errors present

versions

videojs

what version of videojs does this occur with? 7.7.6

browsers

what browser are affected? Safari/Chrome/(probably other browsers as well)

OSes

what platforms (operating systems and devices) are affected? Android/IOS/(Mobile devices)

plugins

are any videojs plugins being used on the page? If so, please list them below. VideoJS

[Tharit]

Can confirm this issue, I just was about to open a ticket for this as well. Tested on iPhone / iOS / Android, happens everywhere. I think Issue #94 also referenced this problem back in 2018.

I also have another issue with the device rotation; all of the devices I tested start off initially looking "at the ceiling" (so straight up basically); I have to move the camera by touch & drag to get them to look "forward". Have looked through the API & Implementation, but the initial orientation does not seem to be configurable. Seems like the base orientation for the deviceOrientation API is "lying flat on the table", so when the user holds the device its rotated 90 degrees.. but thats not very useful.

[mrkos67]

@Tharit You have to wait for the camera to be ready — it's not immediately accessible when you initialize via player.vr(...). This is the code I've used to successfully set the camera FOV to front and center upon init:

let timer = setInterval( () => {
  if( player.vr().camera )
  {
    clearInterval( timer );
    player.vr().camera.position.set( x, y, z );
    player.vr().controls3d.update();
  }
}, 200 );

[jiang-asp]

Thanks, @mrkos67 for the solution to the camera.

And also second the original issue, I can reproduce it in my mobile devices.

---

Update: I figured out a fix! In the OrbitOrientationControls, when rotating to the left to around 90 degrees, this.lastAngle_.z which should be a minus number, suddenly turned to plus. There might be a better solution that fixes it from the source, but adjusting the value right before this.orbit.rotateLeft() works.

if (typeof this.lastAngle_ === 'undefined') {
  this.lastAngle_ = currentAngle;
}

// This part is the fix.
if (this.lastAngle_.z * currentAngle.z < 0) {
  this.lastAngle_.z = this.lastAngle_.z * -1;
}

this.orbit.rotateLeft((this.lastAngle_.z - currentAngle.z) * (1 + this.speed));
this.orbit.rotateUp((this.lastAngle_.y - currentAngle.y) * (1 + this.speed));
this.lastAngle_ = currentAngle;

[arslancb]

Issue persists in version 1.8.0.

[arslancb]

Solution is following https://github.com/videojs/videojs-vr/issues/203

VideoJS must ask for Motion Detection Permission from Mobile devices