CODEWITHSUNDEEP
htmlaugmented-realitywebxrmodel-viewer
David Karasek
David Karasek

Reputation: 348

WebAR using model viewer does not work on Android

I am trying to build a demo of model-viewer using a simple box object. It works fine on iOS/Safari, but I am unable to get this to work on Android. On Android, it will not activate the camera, just shows the model in blank space, the model can be moved around. I have tried using multiple models, including ones I have pulled from the internet, that are in working demos. Here is the complete HTML

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-loader.js"></script>
  <script src="https://unpkg.com/[email protected]/intersection-observer.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/ResizeObserver.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/fullscreen.polyfill.js"></script>
  <script src="https://unpkg.com/@magicleap/prismatic/prismatic.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/focus-visible.js" defer></script>
  <title>Model Viewer Demo</title>
</head>
<body>
  <h1>WebAR Demo</h1>
  <p>A Basic demo of WebAR using Google's model-viewer component.</p>
  <div id="card">
    <model-viewer alt="its just a box" 
      src="assets/BoxTest.glb" 
      ios-src="assets/BoxTest.usdz" 
      background-color="#afe" 
      shadow-intensity="1" 
      camera-controls 
      interaction-prompt="auto" 
      ar 
      quick-look-browsers="safari chrome">
    </model-viewer>
  </div>
  <script type="module" src="https://unpkg.com/@google/[email protected]/dist/model-viewer.js">
  </script>
  <script nomodule src="https://unpkg.com/@google/[email protected]/dist/model-viewer-legacy.js">
  </script>
</body>
</html>

I am at a complete loss as to why it doesn't work and to what I need to try next.

Upvotes: 2

Views: 1582

Answers (1)

David Karasek
David Karasek

Reputation: 348

Turns out I was using simpleHTTPServer to serve it and it for some reason was the cause of the issue. I assume it didn't support the MIME type for the gltf file.

Upvotes: 1

Related Questions