Camera shows gray background

[GwenGuts]

Hi, I tried to launch an example with InstantTracker as described here: https://codesandbox.io/s/instant-tracking-zl565?file=/src/App.jsx

When I launch the example, I have the prompt for authorizing the use of the camera, when I accept, I'm redirected to a page with the Button "Tap here..." at the bottom of the page. But the camera isn't capturing anything and instead, I have a gray background.

What I want to do is to tap the screen when seeing a Qr Code to place an object on it, as in the example.

What I see on my tablet screen:

The tablet:

• Samsung Galaxy Tab S9
  • OS: Android 14
  • Browser: Google Chrome 126.0.06478.122

The config of my dev environment:

• Visual Studio Code
• I'm using Vite & Vite Basic SSL for hosting on a https server (which is my computer): "vite --port 5174 --host"
• My package.json:

  "dependencies": {
  "@vitejs/plugin-basic-ssl": "^1.1.0",
  "@zappar/zappar-react-three-fiber": "^2.4.9",
  "eslint-plugin-react": "^7.34.3",
  "react": "^18.3.1",
  "react-dom": "^18.3.1"
  },
  "devDependencies": {
  "@types/react": "^18.3.3",
  "@types/react-dom": "^18.3.0",
  "@typescript-eslint/eslint-plugin": "^7.13.1",
  "@typescript-eslint/parser": "^7.13.1",
  "@vitejs/plugin-react": "^4.3.1",
  "eslint": "^8.57.0",
  "eslint-plugin-react-hooks": "^4.6.2",
  "eslint-plugin-react-refresh": "^0.4.7",
  "typescript": "^5.2.2",
  "vite": "^5.3.1"
  }

• Reading the Zappar documentation, I'm not on an hosted web server on another domain (I'm on a 192.168... local ip address), so I'm not in a licensing blocked situation.
• Here is the (barely) adapted code from the example that I launch:

  
  import { useState } from 'react'
  import './App.css'
  import { InstantTracker, ZapparCamera, ZapparCanvas, BrowserCompatibility } from '@zappar/zappar-react-three-fiber';

function App() { let [placementMode, setPlacementMode] = useState(true);

return (
  <>
   <BrowserCompatibility />
    <ZapparCanvas>
      <ZapparCamera />
      <InstantTracker placementMode={placementMode} placementCameraOffset={[0, 0, -5]}>
        <mesh>
          <sphereGeometry />
          <meshStandardMaterial color="hotpink" />
        </mesh>
      </InstantTracker>
      <directionalLight position={[2.5, 8, 5]} intensity={1.5} />

    </ZapparCanvas>
    <div
      id="zappar-placement-ui"
      onClick={() => {
        setPlacementMode((currentPlacementMode) => !currentPlacementMode);
      }}
      onKeyDown={() => {
        setPlacementMode((currentPlacementMode) => !currentPlacementMode);
      }}
      role="button"
      tabIndex={0}
    >
      Tap here to
      {placementMode ? ' place ' : ' pick up '}
      the object
    </div>
  </>
);

}

export default App;

I also tried on an Android smartphone, same result.

Thanks for your help

[GwenGuts]

So it was vite which was the guilty one. If I use webpack and the initial react-app-rewired module (like in the code sandbox), it works... Maybe add support for vite in the future ?

Thanks

[nyan-left]

Hi @GwenGuts ,

Vite requires a bit of extra setup, here's an example repo https://github.com/nyan-left/uar-r3f-vite-ts-ft

[GwenGuts]

Hi @GwenGuts ,

Vite requires a bit of extra setup, here's an example repo https://github.com/nyan-left/uar-r3f-vite-ts-ft

Ho thanks for the tip !