Zum Hauptinhalt springen

Arbeiten mit iframes

iframe Setup für Android und iOS 15+​

Um Inline-AR für Android und iOS 15+ zuzulassen, müssen Sie einen allow-Parameter in Ihren iframe mit die folgenden feature-policy directives einfügen:

<iframe allow="camera;gyroscope;accelerometer;magnetometer;xr-spatial-tracking;microphone;"></iframe>

HINWEIS: Das Mikrofon ist optional.

LEGACY-METHODE: Unterstützt iOS-Versionen vor iOS 15​

Das Folgende ist NUR für die Unterstützung von Inline AR in iOS-Versionen vor iOS 15 erforderlich. In Anbetracht der hohen Akzeptanz von iOS 15+ empfehlen wir diesen Ansatz NICHT MEHR.

Hier finden Sie die neuesten Statistiken von Apple über die Verbreitung von iOS: https://developer.apple.com/support/app-store/

Zusätzlich zum Einfügen des allow-Parameters mit den korrekten feature-policy directives in Ihren iframe wie oben erklärt, müssen Sie zur Unterstützung von World Tracking-Projekten auf iOS-Versionen vor iOS 15 auch zusätzliches Javascript sowohl auf den OUTER- als auch auf den INNER AR-Seiten einfügen, wie unten erklärt.

In diesen Versionen blockiert Safari den Zugriff auf Geräteausrichtung und Gerätebewegungsereignisse von herkunftsübergreifenden iframes. Um dem entgegenzuwirken, müssen Sie zwei Skripte in Ihr Projekt aufnehmen, um die Kompatibilität mit iOS bei der Bereitstellung von World Tracking-Projekten zu gewährleisten.

Dies ist nicht erforderlich für Face Effects oder Image Target Projekte (mit disableWorldTracking auf auf true gesetzt).

Bei korrekter Implementierung ermöglicht dieser Prozess der OUTER-Website, Bewegungsereignisse an die INNER AR-Website zu senden, eine Voraussetzung für World Tracking.

Für die OUTER-Website​

iframe.js muss über diesen Script-Tag in den HEAD der OUTER-Seite eingebunden werden:

<script src="//cdn.8thwall.com/web/iframe/iframe.js"></script>

Wenn Sie AR starten, registrieren Sie den XRIFrame über die iframe-ID:

window.XRIFrame.registerXRIFrame(IFRAME_ID)

Beim Beenden von AR muss der XRIFrame abgemeldet werden:

window.XRIFrame.deregisterXRIFrame()

Für die INNERE Website​

iframe-inner.js muss in den HEAD Ihrer INNER AR Website mit diesem Skript-Tag eingebunden werden:

<script src="//cdn.8thwall.com/web/iframe/iframe-inner.js"></script>

Durch die Kommunikation zwischen dem inneren und dem äußeren Fenster können Daten zur Geräteausrichtung/Gerätebewegung gemeinsam genutzt werden.

Siehe Beispielprojekt unter https://www.8thwall.com/8thwall/inline-ar

Beispiele​

Äußere Seite​
// Geräteausrichtung/Gerätebewegung an den INNEREN iframe senden
<script src="//cdn.8thwall.com/web/iframe/iframe.js"></script>

...
const IFRAME_ID = 'my-iframe' // Iframe mit AR-Inhalt.
const onLoad = () => {
  window.XRIFrame.registerXRIFrame(IFRAME_ID)
}
// Event-Listener und Callbacks für das Body-DOM hinzufügen.
window.addEventListener('load', onLoad, false)

...

<body>
  <iframe
    id="my-iframe"
    style="border: 0; width: 100%; height: 100%"
    allow="camera;microphone;gyroscope;accelerometer;"
    src="https://www.other-domain.com/my-web-ar/">
  </iframe>
</body>
Innere Seite: AFrame-Projekte​
<head>
  <!-- Recieve deviceorientation/devicemotion from the OUTER window -->
  <script src="//cdn.8thwall.com/web/iframe/iframe-inner.js"></script>
</head>

...

<body>
  <!-- For A-FRAME -->
  <!-- NOTE: The iframe-inner script must load after A-FRAME, and iframe-inner component must appear
  before xrweb. -->
  <a-scene iframe-inner xrweb>
    .. </a-scene> <a-scene iframe-inner xrweb>.
  </a-scene>
Innere Seite: Nicht-AFrame-Projekte​
<head>
  <!-- Recieve deviceorientation/devicemotion from the OUTER window -->
  <script src="//cdn.8thwall.com/web/iframe/iframe-inner.js"></script>
</head>

...

<!-- For non-AFrame projects, add iframeInnerPipelineModule to the custom pipeline module section,
typically located in "onxrloaded" like so: -->
XR8.addCameraPipelineModules([
  // Benutzerdefinierte Pipeline-Module
  iframeInnerPipelineModule,
])