本文へスキップ

iframeでの作業

AndroidおよびiOS用iframeセットアップ 15+​

AndroidとiOS 15+でインラインARを許可するには、iframeに以下のfeature-policyディレクティブでallowパラメータを含める必要があります：

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

注：マイクはオプションです。

LEGACY METHOD: iOS 15より前のiOSバージョンをサポート​

以下は、iOS 15より前のiOSバージョンでインラインARをサポートするために唯一必要なものです。 iOS 15+の高い普及率を考えると、私たちはこの方法を使うことをもはや推奨しません。

アップルによる最新のiOS普及統計をご覧ください：https://developer.apple.com/support/app-store/

feature-policy directives 上記で説明したように、iframeに正しいallowパラメータを含めることに加えて、iOS 15より前のiOSバージョンでWorld Trackingプロジェクトをサポートするためには、以下に説明するように、OUTERとINNER ARページの両方に追加のjavascriptを含める必要があります .

これらのバージョンでは、Safariはクロスオリジン iframeからのdeviceorientationおよびdevicemotionイベントアクセスをブロックします。 この対策として、World Trackingプロジェクトのデプロイ時にiOSとのクロスコンパチビリティ（ ）を確保するために、プロジェクトに2つのスクリプトを含める必要があります。

Face EffectsやImage Targetプロジェクトでは必要ありません（disableWorldTrackingを trueに設定している場合）。

このプロセスが正しく実装されていれば、OUTERのウェブサイトは、ワールドトラッキングの要件であるモーションイベントを INNER ARウェブサイトに送信することができる。

OUTERウェブサイト​

iframe.jsは、このスクリプト・タグを介してOUTERページのHEADに含める必要があります：

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

AR起動時にiframe IDでXRIFrameを登録する：

window.XRIFrame.registerXRIFrame(IFRAME_ID)

ARを停止する場合は、XRIFrameの登録を解除する：

window.XRIFrame.deregisterXRIFrame()

インナーウェブサイトの場合​

iframe-inner.jsは、INNER ARウェブサイトのHEADに、このスクリプトタグと一緒に含める必要があります：

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

インナーウィンドウとアウターウィンドウが通信できるようにすることで、デバイスの向き／デバイスの動きのデータを共有することができる。

https://www.8thwall.com/8thwall/inline-arのサンプルプロジェクトを参照。

例​

アウターページ​

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

...
const IFRAME_ID = 'my-iframe' // ARコンテンツを含むIframe
const onLoad = () => {
  window.XRIFrame.registerXRIFrame(IFRAME_ID)
} // 本体のDOMにイベントリスナーを追加する。
//
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>
内側のページAFrame projects​
<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>
内側のページノンAフレーム・プロジェクト​
<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([
  // カスタムパイプラインモジュール
  iframeInnerPipelineModule,
])