P5.js: rotationX/Y/Z only works over https in Android Chrome

[samuset]

rotationX, rotationY, rotationZ

Using a Chrome browser on Android devices. Works in Firefox over localhost & https. Works over https in Chrome, but only returns 0 over localhost.

Nature of issue?

• [x] Found a bug
• [ ] Existing feature enhancement
• [ ] New feature request

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [x] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

Which platform were you using when you encountered this?

• [x] Mobile/Tablet (touch devices)
• [ ] Desktop/Laptop
• [ ] Others (specify if possible)

Details about the bug:

• p5.js version: v0.7.3 April 02, 2019 (minified)
• Web browser and version: Chrome 74.0.3729.157
• Operating System: Android 8.1.0
• Steps to reproduce this:

function setup()
{
    noCanvas()
}

function draw()
{
    document.getElementById( 'test' ).innerHTML = rotationX + ', ' + rotationY + ', ' + rotationZ
}

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[stalgiag]

Thanks for the issue! Able to reproduce with Chrome 75.0.3770 and Android 8.0.0.

[stalgiag]

This link explains the deprecation. We could add something to the documentation or try to think of a workaround.

Edit: Workaround seems unlikely. Probably will have to rely on users to handle this themselves. Luckily the online editor serves securely but most other development environments and many websites will break on Chrome with this change.

[limzykenneth]

Yes, this is expected and has been talked about for awhile now. It should also affect accelerationX/Y/Z as well. It should work on localhost as that is a trusted connection, so I would say Firefox is exhibiting the right behaviour but not in Chrome.

A workaround is supposed to be impossible and if any are found they should be deemed a bug in the browser implementation.

The web editor is served over https so there probably won't be a problem there for the most part. As mentioned, local development over localhost should work as well (not sure why it doesn't in Chrome, could be a bug in Chrome, could be Chrome's design decision, could be something else). The final deployment would be slightly more problematic, although getting a https is much easier nowadays than before with Cloudflare and LetsEncrypt, not all deployment circumstances can be accounted for with those two options easily. But then again, not much we can do on our side.

[stalgiag]

@limzykenneth I am not certain but I think the issue with localhost in most mobile development situations would be that the site is being served from a computer on the same network right? So perhaps it isn't detecting as a trusted connection? For example, with my setup, I run a node server on my laptop and then on my phone I go to my laptop's private ip address to run the sketch. Perhaps since it isn't localhost or 127.0.0.1 then it isn't recognized as secure?

Also I am not sure if this is a bug in Chrome or just that Firefox is still allowing device orientation events on insecure sources. In the Chrome Platform Status page for the change it shows Firefox as not having publicly announced any plans to adopt the same change. I don't know if this is accurate or up-to-date though.

[limzykenneth]

I am not certain but I think the issue with localhost in most mobile development situations would be that the site is being served from a computer on the same network right? So perhaps it isn't detecting as a trusted connection? For example, with my setup, I run a node server on my laptop and then on my phone I go to my laptop's private ip address to run the sketch. Perhaps since it isn't localhost or 127.0.0.1 then it isn't recognized as secure?

With that kind of setup then probably yes, it would be marked as an insecure connection. I haven't had the need to workaround that before but it got me thinking...

I haven't been following the news on this but I believe Firefox and Safari are both at least thinking of doing the same.

[limzykenneth]

@stalgiag I came across the specs [here] and it mentions exemptions for localhost. What caught my attention is the mentioning of .localhost namespace which can be treated as secure. I'm not sure if my reading is correct but when running a server on a Mac, I can access the server on the address my-computers-name.local, I wonder if that counts as being under a local connection and thus secure?

I haven't test this out on my iPhone yet and I don't have an Android device with Chrome to test this out but I thought it may be worth a try.

[lmccart]

sounds like this is not a bug, but is the correct behavior of android chrome at this point. we may want to think about a tutorial that talks generally about browser security and HTTPS and links to resources that give specifics for different devices/browsers.

[stalgiag]

Just to follow up @limzykenneth I finally got around to testing the my-computers-name.local and I was unable to make it work on my end with Windows 10 + Android. It seems that I would need to make my computer network-discoverable and fiddle with the DNS settings. I am reporting this just to indicate that this might not be the easiest solution to suggest to users in documentation.

[limzykenneth]

@stalgiag Follow up to your follow up, I recently had to get around this problem myself and what I ended up doing is to do self-signed certificate on my-computers-name.local host.

ParcelJS' server can generate self-signed certificate on the fly as well so that may work in most cases, but I'm using socket.io at the same time and if the socket connection is not served over SSL as well it won't connect.

I'm planning to write up some sort of a tutorial for my process, if you like I can show you the draft once I'm done and you can input on Windows and Android since I don't have those devices?

[stalgiag]

Ah yes that would be helpful. I had to figure out something for p5.xr stuff so I have been using http-server with an openssl certificate as outlined in the answer to this StackOverflow question. But yeah I can help with testing your tutorial on Windows/Android

[limzykenneth]

I've forked http-server and added the ability to auto generate self-signed certificate with code from Parcel: https://github.com/limzykenneth/http-server

The folks at http-server doesn't seem keen on merging this kind of functionality in: https://github.com/http-party/http-server/pull/562 https://github.com/http-party/http-server/pull/562 so I'm thinking what would a reasonable next step be. I was originally going to recommend Parcel but only just found out that it doesn't play well with p5.js' global mode (everything get scoped and not accessible to global mode constructor).

[limzykenneth]

@stalgiag I'm breaking up the tutorial into two parts, first part just deals with a simple frontend only server which doesn't require the user to manually create certificates: https://medium.com/limzykenneth/setting-up-local-development-server-with-self-signed-ssl-certificate-for-f095ed510dab

For part two, which I'm still writing, will include a backend server and will require manual certificate generation.

Have a look when you can, I plan on editing it slightly to be included in the wiki here but I'm quite sure I didn't cover scenarios for Windows and Android so would like your input here.

[stalgiag]

@limzykenneth nice! I just ran through the tutorial with Windows 10 & Android 10 with no problems. Obviously I didn't need to do the mouse click permission request stuff but your sketch works either way. Your fork of http-server works nicely.