メインコンテンツへスキップ

iframeを使う

iframeの設定（Android、iOS 15以上）​

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

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

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

レガシーメソッド: iOS 15以前のiOSバージョンに対応しています。​

以下は、iOS 15以前のiOSバージョンでインラインARをサポートする場合にのみ必要です。 iOS 15+の高い普及率を考慮し、この方法を使用することを推奨しません。

アップルによる最新のiOS採用統計はこちら: https://developer.apple.com/support/app-store/

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

これらのバージョンでは、Safariはcross-originのiframeからのdeviceorientationとdevicemotionのイベントアクセスをブロックします。 この対策として、World Trackingプロジェクトのデプロイ時にiOSとのcross-compatibilityを確保するために、プロジェクトに2つのスクリプトを含める必要があります。

Face EffectsやImage Targetプロジェクトでは必要ありません ( disableWorldTrackingがtrueに設定されているもの)

この処理が正しく行われると、World Trackingの要件である、OUTERウェブサイトからINNER ARウェブサイトへモーションイベントを送信することが可能になります。

OUTERサイトの場合​

iframe.jsは、このscriptタグでOUTERページの HEADに含める必要があります:

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

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

window.XRIFrame.registerXRIFrame(IFRAME_ID)

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

window.XRIFrame.deregisterXRIFrame()

INNERサイトの場合​

iframe-inner.jsは、このscriptタグでINNER ARのウェブサイトの HEAD に含める必要があります:

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

インナーウィンドウとアウターウィンドウが通信することで、デバイスのオリエンテーション/デバイスモーションのデータを共有することができます。

サンプルプロジェクトはこちら https://www.8thwall.com/8thwall/inline-ar

例​

アウターページ​
// INNER iframeにdeviceorientation/devicemotionを送信する
<script src="//cdn.8thwall.com/web/iframe/iframe.js"></script>

...
const IFRAME_ID = 'my-iframe' // ARコンテンツを含むiframe
const onLoad = () => {
  window.XRIFrame.registerXRIFrame(IFRAME_ID)
}.
// bodyのイベントリステンダとコールバックを追加する
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>
インナーページ: A-Frameプロジェクト​
<head>
  <!-- OUTERウィンドウからデバイスのオリエンテーション/デバイスモーションを受け取る -->
  <script src="//cdn.8thwall.com/web/iframe/iframe-inner.js"></script>
</head>

...

<body>
  <!-- A-FRAMEの場合 -->
  <!-- 注意:  iframe-innerスクリプトはA-FRAMEの後に読み込み、iframe-innerコンポーネントはxrwebの前に
  表示する必要があります。 -->
  <a-scene iframe-inner xrweb>
    ...
  </a-scene>
インナーページ: 非A-Frameプロジェクト​
<head>
  <!-- OUTERウィンドウからデバイスのオリエンテーション/デバイスモーションを受け取る -->
  <script src="//cdn.8thwall.com/web/iframe/iframe-inner.js"></script>
</head>

...

<A-Frame以外のプロジェクトでは、iframeInnerPipelineModuleをカスタムパイプラインモジュールセクションに追加します。
、通常 "onxrloaded "に以下のように配置します: -->
XR8.addCameraPipelineModules([
  // Custom pipeline modules
  iframeInnerPipelineModule,
])