Node.js and webpack deployment of GeometryViewer with AR

Hello.

I’m new to vtk.js so I apologize if I’m skipping some basic point that I don’t know. I am trying to deploy the GeometryViewer example with node.js and webpack in order to test the augmented reality support. My dependencies and building scripts are:

   "scripts": {
     "dev": "node_modules/.bin/webpack",
     "server": "./node_modules/.bin/http-server dist -p 3007 -c-1",
   },
   "dependencies": {
     "@kitware/vtk.js": "^25.15.1"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.13.12",
     "autoprefixer": "^10.2.5",
     "babel-loader": "^8.2.2",
     "buffer": "^6.0.3",
     "css-loader": "^6.7.3",
     "html-loader": "^2.1.2",
     "http-server": "^14.1.1",
     "postcss-loader": "^7.0.2",
     "readable-stream": "^2.3.7",
     "stream": "^0.0.2",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
     "webpack": "^5.27.2",
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2"
   },

From a PC, both your example and your code deployed on my localhost work fine (upper image is my localhost, lower one is your example):

In my mobile phone, your example works well:

However, if I access my deployed code from mobile, the same code does not recognize my device as XR/AR/VR capable:

To check compatibility, I use the following code:

var isXRCapable = navigator.xr !== undefined && fullScreenRenderWindow.getApiSpecificRenderWindow().getXrSupported();
var isARCapable = navigator.xr !== undefined && fullScreenRenderWindow.getApiSpecificRenderWindow().getXrSupported() && navigator.xr.isSessionSupported('immersive-ar');
var isVRCapable = navigator.xr !== undefined && fullScreenRenderWindow.getApiSpecificRenderWindow().getXrSupported() && navigator.xr.isSessionSupported('immersive-vr');
if (!isXRCapable) {// XR capable
  window.alert("Your device is not XR capable");
}
if (!isARCapable) {  // AR capable
  window.alert("Your device is not AR capable");
}
if (!isVRCapable) {  // VR capable
  window.alert("Your device is not VR capable");
}

What could be going wrong? Should I try some other way of deploying the example?Since the code is the same as the example, I understand that I’m missing some additional configuration to make this code work, but I can’t find any references to that.

Thanks in advance.

Hi @Lois_Vazquez , thanks for using vtk.js!

It would be helpful to have more information on what is happening. Could you please add the following details:

  • What mobile device you are using
  • What browser you are using

Also, what is the output that you see from the following checks?

navigator.xr !== undefined
navigator.xr.isSessionSupported('immersive-ar')
fullScreenRenderWindow.getApiSpecificRenderWindow().getXrSupported()

I am able to reproduce the issue and have logged for investigation at `GeometryViewer` WebXR option does not appear on local deployment · Issue #2674 · Kitware/vtk-js · GitHub.

A workaround in the meantime is to use adb for wireless debugging at localhost:

  1. Make sure your Android device is in developer mode
  2. Connect your Android device to your PC
  3. Open a console on your PC and run adb devices and verify your device is present
  4. Run adb tcpip 5555 to listen for a connection on port 5555
  5. Disconnect your device from the PC
  6. Find the wireless IP address for your device under wi-fi settings
  7. On your PC run adb connect <your-device-ip> to connect to the device over wi-fi
  8. Run adb reverse tcp:9999 tcp:9999 to allow adb to route traffic between port 9999 on both the PC and mobile device
  9. Build and run GeometryViewer on your PC and visit the localhost example address on your mobile device. For the diskout.vtp example this URL is http://localhost:9999/?fileURL=https://data.kitware.com/api/v1/item/59de9de58d777f31ac641dc5/download .

Thank you for such a quick response.

My mobile device is: Xiaomi Mi 11 (the same result with other devices)
Browsers in PC: Google Chrome and Mozilla Firefox
Browsers in Android: Google Chrome

Check results in PC with Google Chrome and Mozilla Firefox:
navigator.xr !== undefined: true
navigator.xr.isSessionSupported('immersive-ar'): [object Promise]
fullScreenRenderWindow.getApiSpecificRenderWindow().getXrSupported(): true

Check results in Android with Google Chrome:
navigator.xr !== undefined: false
navigator.xr.isSessionSupported('immersive-ar'): nothing is showed
fullScreenRenderWindow.getApiSpecificRenderWindow().getXrSupported(): true

In the past days I found that even with your example without HTTPS, WebXR support is not available on my mobile device. I guess it’s the same reason it happens on localhost.