Can WebGL access mobile sensors?

I was wondering if it's possible to get the accelerometer data into a Unity app. Does anybody know?

 

I've seen non-Unity WebGL things that support the accelerometer, so... maybe? But considering we only just got touch input, and mobile is not yet supported in Unity WebGL, it's unlikely and you're probably best off avoiding working with WebGL for mobile entirely at the moment.

Edit: if you can get it to even run on your mobile, just try these out: http://docs.unity3d.com/ScriptReference/SystemInfo-supportsAccelerometer.html
http://docs.unity3d.com/ScriptReference/Input-acceleration.html

 

On which platforms? The last time I checked, WebGL builds weren't supported at all on either Android or iOS.

 

Hmmm here from Unity 2021.1.9f1.

1. Work a charm on straight iOS build.

2. However WebGL iOS is not working.
I debug the Input.Acceleration from the iPhone 11 Safari to the Mac Safari > Develop Console and it always report (0,0).


3. Test on WebGL-Android is working but slowly and to the opposite of what I had on the iOS build... (I mean it's like the X axis is flipped )

Still not support after 6 years?...

 

Unity WebGL doesn't officially support Mobile. Never had. They only -started- adding support in the latest 2021.2 beta.

 

Alright then I just tried a WebGL build using 2021.2.0b9.3335 and the Input.Acceleration is still not supported for iOS.

 

Finally did some research and got it works.
Tested on iphone 11.

1. A nice page which illustrate everything you can grab from the device of Javascript :
- https://sensor-js.xyz/demo.html

2. checking the code you'll find some nice documentation about it with a nice simple lines of code with Javascript:
- https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent

Code (csharp):

1. window.addEventListener('devicemotion', function(event) {
2.   console.log(event.acceleration.x + ' m/s2');
3. });

3. Be sure your page url begin is https:// to prompt the Apple Device Motion User access.
If http:// only, it won't show it and the device motion is muted.

4. Unfortunately SendMessage cannot return a Vector3 then you'll have to add a listener for each axis.

5. Below the result of my research to access the Acceleration.x only.
you can pretty much do the same for every single sensort you can see from the 1st url I shared.

Unity C# :

Code (csharp):

1. public class WebGLInputAcceleration : MonoBehaviour
2. {
3.     [DllImport("__Internal")]
4.     private static extern void AddAccelerationEventX(string objSource, string msg);
5.  
6.     [DllImport("__Internal")]
7.     private static extern void RemoveInputAccelerationEventX();
8.  
9.     public void EnableAccelerationDetection()
10.     {
11.             AddAccelerationEventX(gameObject.name, "MsgSimulationResult");
12.     }
13.  
14.     public void DisableAccelerationDetection()
15.     {
16.             RemoveInputAccelerationEventX();
17.     }
18.  
19.     public void MsgSimulationResult(float value)
20.     {
21.         Debug.Log( "Acceleration.<color=red>x</color> : " + value);
22.     }
23. }

InputAcceleration.jslib to drop to your Plugins directory :

Code (csharp):

1. mergeInto(LibraryManager.library,
2. {
3.     AddAccelerationEventX: function (objSource, msg)
4.     {
5.         AddAccelerationEventX(Pointer_stringify(objSource), Pointer_stringify(msg))
6.     },
7.     RemoveInputAccelerationEventX: function ()
8.     {
9.         RemoveInputAccelerationEventX();
10.     }
11. });

InputAcceleration.js to include to your index.html :

Code (csharp):

1.  
2. var eventAccelerationX = null;
3. function AddAccelerationEventX(objSource, msg)
4. {
5.     if(eventAccelerationX == undefined)
6.     {
7.         eventAccelerationX = function(event)
8.         {
9.             //console.log(event.acceleration.x + ' m/s2');
10.             unityInstance.SendMessage(objSource, msg, event.acceleration.x);
11.         }
12.     }
13.     window.addEventListener('devicemotion', eventAccelerationX);
14. }
15. function RemoveInputAccelerationEventX()
16. {
17.     if (eventAccelerationX != undefined)
18.     {
19.         window.removeEventListener('devicemotion', eventAccelerationX);
20.     }
21. }

 

I actually forgotten a very important point before dealing with the device motion especially on iOS...
...do not forget to prompt for devicemotion permission :
- https://dev.to/li/how-to-requestper...n-and-deviceorientation-events-in-ios-13-46g2

 

Awesome, just what I needed.

 

I can get it work in 2022 (not try 2021) but only with new input system. Old input system (Input.gyro.attitude and all other) are not working

Code (CSharp):

1. using System.Collections;
2. using System.Collections.Generic;
3.  
4. using UnityEngine;
5. using UnityEngine.InputSystem;
6.  
7. public class TTTT : MonoBehaviour
8. {
9.     void Start()
10.     {
11.         if(AttitudeSensor.current != null)
12.             InputSystem.EnableDevice(AttitudeSensor.current);
13.     }
14.     // Update is called once per frame
15.     void Update()
16.     {
17.         if(AttitudeSensor.current != null)
18.             gameObject.transform.rotation = AttitudeSensor.current.attitude.ReadValue();
19.         else gameObject.transform.rotation = Quaternion.Euler(0,(float)System.DateTimeOffset.Now.TimeOfDay.Milliseconds * 360 / 1000f,0);
20.     }
21. }
22.  

 

My asset supports gyroscope and accelerometer for Unity 2019 onwards.

 

I spended a lot of time trying to get the accelerometer sensor on iPhone via WebGL work. Finally I saw the ultimative pointer in the console log on iPhone: "requesting device motion access requires a user gesture to prompt".
It means that the enabling of sensor, which includes the requsting of device access, must be triggered by a user interaction. In my game I linked the initializing of the accelerometer just to "Start"-Button of the game:

Code (CSharp):

1.    
2. public void ClickStart(int buttonNo)
3.     {
4.         InputSystem.EnableDevice(Accelerometer.current);
5.     }
6.  

Otherwise: it wouldn't be working as a part of "Start" or "Awake" lifecycle functions, because they are not directly triggered by the user.

 

I created a separate thread with Unity Assets that support all sensors and modules for WebGL:
gyroscope, accelerometer, GPS, camera, vibration...

Current list of Assets:

• Gyroscope Accelerometer WebGL — enables you to read the gyroscope and accelerometer information provided by the browser.
• Geolocation WebGL — allows you to access GPS on the web.
• Device Camera WebGL - allows you to access the camera feed and stream its contents into a render texture (or Texture2D). It works on Chrome, Safari, Firefox, Opera, Edge.
• Vibration WebGL - enables you to vibrate your mobile phone. You can control how long you want to keep the mobile vibrating, as well as define a vibration sequence.
• Screen Orientation WebGL — a way to listen to device orientation changes.

 

Hi, Your answer helps me a lot! Now I found that my webGL build could work stable for IOS on itch.io , when I just entered, it even shows the permission access call hint, LinearAccelerationSensor get value after that.

But when I use Andriod + Chrome to visit my link, I found there no any permission call hint, even I already do

Code (CSharp):

1.  if (LinearAccelerationSensor.current != null)
2.             InputSystem.EnableDevice(LinearAccelerationSensor.current);

The LinearAccelerationSensor.read() is no value, But this not all the time, If I do the operation below:
* back to outside page( the game page on itch before I enter game start)
* then come back to my game by [Restore Game]Button , it would finally work! every senor would get value, even the old input system, like Input.gyro.userAcceleration...

I don't know why
It seems some thing happened When I out and return to the game
Do you know is there some method to let this happen directly when I just enter my game?
Any help would be appreciated!