# VR on mobilephones - non stereoscopic

**URL:** <https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762>\
**Category:** Questions\
**Created:** [July 23, 2020, 11:29am UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762 "2020-07-23T11:29:42Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ueli](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ueli/32/2466_2.png) [@ueli](https://forum.babylonjs.com/u/ueli)\
**Post date:** [July 23, 2020, 11:29am UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/1 "2020-07-23T11:29:42Z")

</div>

Hi there

I’m using the universal and the arc rotate camera in my project. Its a multibe floor building to walk around. Now i would like to implement a VR button, visible only if you are using it on a mobile device.

Question: Is it possible to use the WebVR camera in a non-stereoscopic way? Only control the direction of the target by the devices motion, the rest will stay the same. (Or implement this control to the universal camera) Did anybody do this so far?

I think it would make it way more useful as most people don’t have a cardboard with them.

Thanks!

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [July 23, 2020, 11:33am UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/2 "2020-07-23T11:33:08Z")

</div>

You are asking about the device orientation camera, which uses the, well, device orientation to control its rotation - this is not VR related, but mobile-phone related -

[https://doc.babylonjs.com/features/cameras#device-orientation-cameras](https://doc.babylonjs.com/features/cameras#device-orientation-cameras)

[https://doc.babylonjs.com/api/classes/babylon.deviceorientationcamera](https://doc.babylonjs.com/api/classes/babylon.deviceorientationcamera)

---

<div class="post-metadata">

**Author:** ![ueli](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ueli/32/2466_2.png) [@ueli](https://forum.babylonjs.com/u/ueli)\
**Post date:** [July 24, 2020, 10:47am UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/3 "2020-07-24T10:47:35Z")

</div>

ah ok - thank you

i have tried to implement it but it alway says:  
“DeviceOrientationEvent.requestPermission is not a function”

[https://playground.babylonjs.com/#6MVYD5#1](https://playground.babylonjs.com/#6MVYD5#1)

On my iphone it does not prompt any request -

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [July 24, 2020, 11:03am UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/4 "2020-07-24T11:03:27Z")

</div>

What iOS version are you using? what iPhone version?

**EDIT**

Just wanted to say - it feels quite weird, as we are checking before running the function:

```javascript
if (typeof(DeviceOrientationEvent) !== "undefined" && typeof (<any>DeviceOrientationEvent).requestPermission === 'function') 

```

What version of babylon are you using?

---

<div class="post-metadata">

**Author:** ![ueli](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ueli/32/2466_2.png) [@ueli](https://forum.babylonjs.com/u/ueli)\
**Post date:** [July 24, 2020, 3:03pm UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/5 "2020-07-24T15:03:32Z")

</div>

iPhone Xr, iOs 13.5.1

---

<div class="post-metadata">

**Author:** ![ueli](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ueli/32/2466_2.png) [@ueli](https://forum.babylonjs.com/u/ueli)\
**Post date:** [July 25, 2020, 11:59am UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/6 "2020-07-25T11:59:43Z")

</div>

Babylon.js v4.1.0-beta.8

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [July 25, 2020, 2:44pm UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/7 "2020-07-25T14:44:55Z")

</div>

Please use the latest beta or the latest stable 4.1, as this issue was fixed already

---

<div class="post-metadata">

**Author:** ![ueli](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ueli/32/2466_2.png) [@ueli](https://forum.babylonjs.com/u/ueli)\
**Post date:** [July 27, 2020, 2:48pm UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/8 "2020-07-27T14:48:43Z")

</div>

But the playground should be up to date - why is it throwing an error there?:

[https://playground.babylonjs.com/#45Z7V6#1](https://playground.babylonjs.com/#45Z7V6#1)

---

<div class="post-metadata">

**Author:** ![ueli](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ueli/32/2466_2.png) [@ueli](https://forum.babylonjs.com/u/ueli)\
**Post date:** [July 27, 2020, 2:54pm UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/9 "2020-07-27T14:54:41Z")

</div>

made a different request - result stays the same:

[https://playground.babylonjs.com/#6MVYD5#2](https://playground.babylonjs.com/#6MVYD5#2)

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [July 27, 2020, 4:19pm UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/10 "2020-07-27T16:19:14Z")

</div>

Yes, the playground should be working correctly.

What is the result you see when you use your iPhone? Can any iPhone user provide an input here as well?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [July 27, 2020, 4:43pm UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/11 "2020-07-27T16:43:43Z")

</div>

Using this [https://playground.babylonjs.com/#6MVYD5#3](https://playground.babylonjs.com/#6MVYD5#3)

It says NotAllowedError, Requesting device orientation or motion access requires a user gesture to prompt.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [July 27, 2020, 5:50pm UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/12 "2020-07-27T17:50:17Z")

</div>

Ok, this is the expected behavior in that case. I think @ueli doesn’t have the rtequestPermission function defined (or at least not as a function), which is odd.

---

<div class="post-metadata">

**Author:** ![ueli](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ueli/32/2466_2.png) [@ueli](https://forum.babylonjs.com/u/ueli)\
**Post date:** [July 27, 2020, 8:12pm UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/13 "2020-07-27T20:12:59Z")

</div>

hmm - that’s bizarre - shouldn’t that be a standart working in all browsers?

Like this…

[https://playground.babylonjs.com/#6MVYD5#4](https://playground.babylonjs.com/#6MVYD5#4)

…it says: “Requesting device orientation or motion acces requires a user gesture to prompt”

grrrr 😉

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [July 27, 2020, 8:32pm UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/14 "2020-07-27T20:32:46Z")

</div>

That’s the expected behavior. You need to ask the user (using a button, for example) if they want to enable the feature.

---

<div class="post-metadata">

**Author:** ![ueli](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ueli/32/2466_2.png) [@ueli](https://forum.babylonjs.com/u/ueli)\
**Post date:** [July 27, 2020, 11:14pm UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/15 "2020-07-27T23:14:37Z")

</div>

i’ve tried that - but it’s not working. same message:

[https://playground.babylonjs.com/#6MVYD5#6](https://playground.babylonjs.com/#6MVYD5#6)

“Requesting device orientation or motion acces requires a user gesture to prompt”

---

<div class="post-metadata">

**Author:** ![ueli](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ueli/32/2466_2.png) [@ueli](https://forum.babylonjs.com/u/ueli)\
**Post date:** [July 28, 2020, 7:21am UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/16 "2020-07-28T07:21:57Z")

</div>

Could it be possible that this user gesture is only allowed on a DOM element?

i’ve been looking for VR examples in the babylonjs docs - but i can’t find any example that is working on iOS (sadly i can’t test android here) with the devices sensor

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [July 28, 2020, 9:02am UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/17 "2020-07-28T09:02:20Z")

</div>

Usually a screen rotation event is more than enough, unless apple has changed something. I have no iphone to test with, but any user event should work correctly. It might be the pointer masking that prevents it from happening, but I am not entirely sure.

I will check with a team member that has an iphone and see what’s up. Try this example - after licking, no exception should be thrown and the device orientation should kick in - [https://playground.babylonjs.com/#6MVYD5#8](https://playground.babylonjs.com/#6MVYD5#8)

---

<div class="post-metadata">

**Author:** ![ueli](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ueli/32/2466_2.png) [@ueli](https://forum.babylonjs.com/u/ueli)\
**Post date:** [July 29, 2020, 5:24pm UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/18 "2020-07-29T17:24:32Z")

</div>

it responds with the same error: “Requesting device orientation or motion access requires a user gesture to prompt”

i will search for a solution the next days and post it here if i find something

---

<div class="post-metadata">

**Author:** ![ueli](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ueli/32/2466_2.png) [@ueli](https://forum.babylonjs.com/u/ueli)\
**Post date:** [July 31, 2020, 7:42am UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/19 "2020-07-31T07:42:36Z")

</div>

If somebody is finding this thread by search, it works like this for me:

> // ASK FOR PERMISSION TO USE THE SENSOR OF THE IPHONE  
> if (typeof DeviceMotionEvent.requestPermission === ‘function’) {  
> DeviceMotionEvent.requestPermission()  
> .then(permissionState =\> {  
> if (permissionState === ‘granted’) {  
> window.addEventListener(‘devicemotion’, () =\> {  
> alert(“permission granted!”);  
> }  
> })  
> .catch(console.error);  
> } else {  
> // handle regular non iOS 13+ devices  
> alert(“noniOS13”);  
> if (typeof DeviceOrientationEvent !== ‘function’) {  
> alert(‘DeviceOrientationEvent not detected’);  
> }  
> if (typeof DeviceOrientationEvent.requestPermission !== ‘function’) {  
> alert(‘DeviceOrientationEvent.requestPermission not detected’);  
> }  
> DeviceOrientationEvent.requestPermission().then(function (result) {  
> }).catch(function (result) {  
> });  
> }

…android i can’t test right now

---

<div class="post-metadata">

**Author:** ![ueli](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ueli/32/2466_2.png) [@ueli](https://forum.babylonjs.com/u/ueli)\
**Post date:** [July 31, 2020, 6:31pm UTC](https://forum.babylonjs.com/t/vr-on-mobilephones-non-stereoscopic/12762/20 "2020-07-31T18:31:48Z")

</div>

the pg for it:  
[https://playground.babylonjs.com/#6MVYD5#6](https://playground.babylonjs.com/#6MVYD5#6)

another a bit stupid question - please forgive my noop-ness:

If i create the new device oriented camera (camera3) i would love to use it as the universal camera (camera2). Is there a way to just swap names of two cameras? or to replace one camera with another? I got so much code working with the “camera2”, it would be so much easier if i could call the new camera the same way (OR if i could handle the universal cameras orientation over the devices orientation, but for that i would probably need to implement it to the universal cameras type script code - i think that’s too much for me now… pfff)
