Screenshot/Photo on IOS is making my background black #3109

QennNg · 2022-01-10T21:15:16Z

QennNg
Jan 10, 2022

<!doctype html>
<html lang="en">
  <head>
    <title>&lt;Indi 2&gt; template</title>
    <meta charset="utf-8">
    <meta name="description" content="&lt;model-viewer&gt; template">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" href="./styles.css" rel="stylesheet"/>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.0/html2canvas.min.js"
      integrity="sha512-UcDEnmFoMh0dYHu0wGsf5SKB7z7i5j3GuXHCnb3i4s44hfctoLihr896bxM0zL7jGkcHQXXrJsFIL62ehtd6yQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script src="canvas2image.js"></script>
    <!-- OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types -->
    <script src="https://unpkg.com/[email protected]/dist/focus-visible.js" defer></script>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
    <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
  </head>
  <body>
    <div id="capture" class="parent">
      <!-- poster="poster.webp" -->
      <model-viewer bounds="tight" src="Astronaut.glb" ios-src="astronot.usdz" ar ar-modes="scene-viewer quick-look"  camera-controls environment-image="neutral" shadow-intensity="1">
        <div  class="progress-bar hide" slot="progress-bar">
          <div class="update-bar"></div>
        </div>
        <button slot="ar-button" id="ar-button">
          View in your space
        </button>
        <div id="ar-prompt">
          <img src="ar_hand_prompt.png">
        </div>
      </model-viewer>  
      <!-- <button onclick="myFunction()" class="btn btn-default">Take a Screenshot!</button> -->
    </div>
    <!-- <model-viewer> HTML element -->
    <script src="script.js"></script>
    <!-- Loads <model-viewer> for browsers: -->
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
  </body>
</html>

const onProgress = (event) => {
  const progressBar = event.target.querySelector('.progress-bar');
  const updatingBar = event.target.querySelector('.update-bar');
  updatingBar.style.width = `${event.detail.totalProgress * 100}%`;
  if (event.detail.totalProgress === 1) {
    progressBar.classList.add('hide');
  } else {
    progressBar.classList.remove('hide');
    if (event.detail.totalProgress === 0) {
      event.target.querySelector('.center-pre-prompt').classList.add('hide');
    }
  }
};
document.querySelector('model-viewer').addEventListener('progress', onProgress);

Description

Hi, so the issue is when I take a photo on my Note10(Android 11), the 3D astronaut appears with my background in AR, however when take do the same on my iPad(IOS 15.2), only the 3D astronaut shows up and my background is black.

Live Demo

https://nvqenn.com/write123/

^ This is how it looks when I take the phote with my Note10

This is how it looks when I took it with my iPad

Version

https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js
https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js

Browser Affected

[x ] Chrome, version: xx.x.xxxx.xx
Edge
Firefox
IE
[ x] Safari

OS

Android
[x ] iOS
Linux
MacOS
Windows

AR

WebXR
SceneViewer
QuickLook

elalish · 2022-01-10T21:19:27Z

elalish
Jan 10, 2022

@QennNg This is not a MV feature, but an OS / AR app feature. Please file the bug on Apple (this seems to be the best place: https://bugs.webkit.org/)

1 reply

QennNg Jan 11, 2022
Author

Okay will do, thanks.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Screenshot/Photo on IOS is making my background black #3109

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Screenshot/Photo on IOS is making my background black #3109

QennNg Jan 10, 2022

Description

Live Demo

Version

Browser Affected

OS

AR

Replies: 1 comment · 1 reply

elalish Jan 10, 2022

QennNg Jan 11, 2022 Author

QennNg
Jan 10, 2022

Replies: 1 comment 1 reply

elalish
Jan 10, 2022

QennNg Jan 11, 2022
Author