Add full player initialization information in QR Code url for Desktop to Mobile AR

Platform Administration Feature Request
1

When implementing desktop to mobile AR, the QR Code does not contain enough information to allow anonymous initialization of the player. If the code contained the assetId, authToken and environment, our app would be able to dynamically load the correct environment javascript and then initialize the player with the same info that it was initialized with on the desktop. Two options would allow us to accomplish this easily when using the client:

  1. (preferred) QR code is generated with query params that contain all the above information and whatever other state the player was initialized with on the desktop app in addition to the environment…ideally this is stored in a jwe token to ensure security and threekit just initializes the player without anything being passed in along with an environment param so we know what js to load. For example, the QR code url could be: https://example.com?threekit_jwe=abcdef&environment=admin-fts. When our app navigates anonymously to that url, it can then load the admin-fts js and call window.threekitPlayer({}) without passing in any arguments. The threekit player will know how to decrypt the jwe and extract the tkcsid, assetId, authToken, etc. and launch the AR experience. This allows us to get the desktop to mobile AR experience “for free”.
  2. Allow us to hook into the QR code generation to append any query params to the url that we would want to use in our app when the mobile device navigates to the url in the QR code. As it works now, we could then append our own jwe or other values as query params at the time the QR code is generated or even change the url:
  • Completely override the url: window.threekitPlayer({ ..., onGenerateQRCode(url: string) => url + "/mobileAR?custom_jwe=abcdef"; });. The QR Code url would then be https://example.com/mobileAR?custom_jwe=abcdef&tkcsid=abc&enableAR=true
  • Add query params: window.threekitPlayer({ ..., onGenerateQRCode() => { queryParam1: "hello", environment: "admin-fts", assetId: "123" } });. The QR Code url would be https://example.com?tkcsid=abc&enableAR=true&queryParam1=hello&environment=admin-fts&assetId=123
1 Like