I am working on a WebGL AR app using Unity and ARWT library. This library works by using aframe and AR.js to start the device camera, read the camera feed from the HTML/JavaScript end, and send it to Unity.
Originally, the library demo starts the device camera (with permission granted) when the webpage is opened. I’d like to modify this so that the camera turns on only when the user presses a button. So I append the camera feed using iframe to html body when press button in Unity.
However, the screen flickers when touched on mobile browsers (Safari, Chrome, etc.). The flickering does not occur when the camera starts while the webpage is opening. It only happens when the camera feed is appended to the HTML afterwards. (Here is a flickering demo on my GitHub)
I found that the flickering is caused by the touchstart and touchend events. These events are registered on unitycanvas, which renders and controls the Unity content. The touch events are registered from framework.js, which is generated by Unity.
I’ve tried set the -webkit-tap-highlight-color to transparent to prevent the touch event effects, but it didn’t work. One way that does eliminate the flickering is to disable touch events entirely but this also removes all user interaction effects in Unity, which is not ideal for my needs.