Chrome on android: touchevent not work on a-entity click - google-chrome

The problem of question is: click event via touch click on mobile from VR mode
not work from android Chrome 79+.
Otherwords touchstart event does not fired on entity from VR mode.
Google Vr services are installed and enabled.
The goal a-entity should be clickable in Chrome latest 79+
on user click (VR mode touch click from mobile)
Links to whole code:
here 2 config simple app:
https://4dkly.csb.app/ (config: fuse 3.6sec; but click on entity does Not work from chrome vr)
https://codesandbox.io/s/aframe-example-4dkly?fontsize=14&hidenavigation=1&theme=white
https://12k87.csb.app/ (cursor color red; fuse turned off , cursor still does not work)
https://codesandbox.io/s/aframe-example-12k87?fontsize=14&hidenavigation=1&theme=dark
Could you please take a look for any of this example, and tell what to do, to make chrome latest, vr mode touch click.
Any new good approach new api is also ok.
Here code excerpt
<script src="https://aframe.io/releases/1.0.1/aframe.min.js"></script>
<a-scene main>
<a-sphere position="0 2 -5" radius="1.25" color="#EF2D5E"> </a-sphere>
<!-- ... -->
<a-camera id="camera" camera rotation>
<a-entity
id="cursor"
cursor="fuse:false"
position="0 0 -1"
material="color: #111;"
>
</a-entity>
</a-camera>
//simple event on click
document.querySelector("a-box").addEventListener("click", () => {
alert("box");
});```

The behavior you described is expected. Touch events are disabled by the browser when entering immersive mode via WebXR as it's the case for Chrome 79+ and content served over https. There are new APIs in the works to enable interactivity while presenting in AR. You can find additional details in this blog post: https://aframe.io/blog/webxr-ar-module/
On devices that don't have a native WebXR implementation VR mode relies on the full screen API and touchevents are available.
I don't recommend relying on screen input while in VR and use a fuse based cursor

Related

How to mute a tab in google chrome?

It is difficult to selectively mute the content that is making sound in google chrome. I have to locate the tab and then scroll up and down to find the content that is producing sound. It would be great if there exist a feature which will let me right click on the tab and say "Mute".
Is there any way to achieve this without using extensions?
Type this in Google Chrome's omnibox
chrome://flags/#enable-tab-audio-muting
You will see this listing
Enable tab audio muting UI control. Windows, Linux, Chrome OS
When enabled, the audio indicators in the tab strip double as tab audio mute controls. This also adds commands in the tab context menu for quickly muting multiple selected tabs. #enable-tab-audio-muting.
Click Enable link at the bottom of this. Restart Chrome to get this feature.
Note : This feature is supported in Google Chrome builds upwards of version 39
Reference: http://fieldguide.gizmodo.com/mute-noisy-tabs-in-google-chrome-1683215637

Google Chrome kiosk mode compatibility on a touch screen monitor

I'm trying to develop a kiosk web application that uses Google Chrome on kiosk mode setup which loads automatically after start-up.
http://www.sitepoint.com/google-chrome-kiosk-mode/
The kiosk web application also uses a virtual keyboard plugin for Google Chrome for the text inputs.
http://xontab.com/Apps/VirtualKeyboard
I'm planning to setup a computer unit with a touch screen monitor for the kiosk.
Note: It's my first time to develop a web application that uses the kiosk mode setup for Google Chrome and I don't have a touch screen monitor for testing. I wanted to ask this question for developers that has experience with this.
My question is:
Does Google Chrome on kiosk mode setup automatically detects my touch screen monitor?
Does Google Chrome automatically enables touch features when my web application is on kiosk mode such as swipe for scrolling up and down.
A touch screen is an input device just like a computer mouse - Google Chrome receives touch events the same way it receives mouse events (although the events are different).
The annoying thing when starting working with touch screens is that the standard click event that we are used to, is triggered after a delay comparing to mouse event. You should listen for tap event or use a library such as https://github.com/ftlabs/fastclick
Making long story short developing a kiosk application integrated with a touch screen is similar to developing mobile websites. You should probably use a JavaScript library to support all kind of touch events such as tap, swipe etc. See http://hammerjs.github.io/
You may also find this website useful http://peter.sh/experiments/chromium-command-line-switches/
I know this answer is six years later but for anyone reading this. You can run Google Chrome in Kiosk Mode with custom options. This can be done by creating a new account and right clicking (in windows 10) on the icon for this account.
Under properties add the following tags to optimize the application for touchscreen use:
–-touch-events –enable-viewport

how to run touch screen applications in non touch environment?

I need to run the touch based browser app in my desktop and modify some codes written in touch events. Can some one tell me what are the best ways to run the touch screen apps in non touch environment? and check its event?
If your app is running inside a browser, you can emulate touch events on non-touch systems by turning on touch emulation in Chrome's developer tools.
In Chrome 26+ this can be found by clicking the "gear wheel" icon in the bottom right, and then selecting the "Overrides" panel. See https://developers.google.com/chrome-developer-tools/docs/mobile-emulation#emulate-touch-events
NB: this will only work while the DevTools are open. So it should be fine for testing, but not for end-user running.

Kendo UI Mobile - Camera feature with HTML5 input tag responsiveness very slow

Implemented camera feature using HTML5 input tag.
Requires atleast 5 to 6 clicks before opening camera. Tried on iOS 6 Safari browser and Goggle chrome browser on Android.
Refered below js files :
1. jquery-1.8.3.js
2. kendo.mobile.min.js
Do we need to include any js file
Code :
<div data-role="view" id="tabstrip-camera" data-title="camera" data-layout="mobile-tabstrip" id="Camera">
<!--Camera Code-->
<input data-click="alert('clciked');" type="file" name="image" accept="image/*" capture>
</div>
Even when tried with simple HTML5 button tag the response is slow and same observation is used.
Please can any one help ? Do we need to include any js file.
Is your intent to deploy an actual mobile app to a phone or tablet device, or just to use Kendo Mobile widgets in a desktop web browser?
If you are going to deploy to a device, then you should be building on top of PhoneGap / Cordova, and could use PhoneGap's image capture function:
http://docs.phonegap.com/en/1.2.0/phonegap_camera_camera.md.html
Try upgrading to the Kendo UI Q3 service pack that was released this week and see if this fixes it.
The original Kendo UI Q3 release had some issues with the touch/mouse events due to the major change we did in event handling in order to support systems with both mouse and touch (Chrome/FF on Windows 8).

New twitter widget in IOS6 HTML5 web app triggers keyboard on startup

I'm building a HTML5 digital magazine and embedded the (new) Twitter widget. When I add the digital magazine to my homescreen as a web app on an 'iDevice' (iPhone/iPad) with IOS6, there is a glitch when starting the web app; The app loads, but when the Twitter widget is loaded, it somehow focusses on an input(?) form element, triggering the iDevice's keyboard. When the app is loaded, the keyboard is still shown.
For the iPad, this is only annoying: for the iPhone, the viewport is zoomed leaving my web app in an undesired state.
Has anybody had the same problem and somehow disabled the 'focus' on the Twitter widget triggering the keyboard?
The guys from Twitter changed the behavior of the widget, solving the bug as described above.
Ref: https://dev.twitter.com/discussions/12858#comment-28613