はじめに
immersive-webのサンプルを試したかったのですが、そのままだと動かなかったので、色々やって見たときのメモです。
localhostで確認できるように準備をする
下記によるとlocalhostでもhttpsでないといけないようなのでlocalhost+httpsの環境を整える必要があります
https://blog.plainteract.net/WebXR-Device-Api-Demo-1/
自己証明書作成
下記を参考に自己証明書を作成しました
https://qiita.com/clown0082/items/551d7c081ff6b41b1717
VSCodeのLiveSeverの設定
LiveSeverを入れてない場合は下記の拡張機能をいれます
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
設定は下記の記事のsetting.jsonを参考にしてください(こちらにも自己証明書の作成部分がありますがWindowsでGitBashなどを使っているとパスの解決でこけたりしました)
https://qiita.com/ma2shita/items/297c812a6cd09b5e82c8#settingsjson-%E3%82%92%E6%9B%B8%E3%81%8F
PCとAndroidを接続する
下記を参考にします
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?hl=ja
PCからAndroidが検出されてないとなったときはADBコマンドのadb devicesを実行すると自分はうまくいきました
ブラウザ設定
WebXRは標準でONになっていないので下記を参考にブラウザの設定
https://qiita.com/arika_nashika/items/e194ede7ed89a7e591a7
サンプルのソースコードを修正する
ポリフィルをいれる必要があるのでその作業を行うだけです
必要なものダウンロード
サンプル本体は下記
https://github.com/immersive-web/webxr-samples
ポリフィルは下記
https://github.com/immersive-web/webxr-polyfill
修正手順
- ポリフィル(buildフォルダ)をサンプル本体のほうにコピーする
- VSCodeでサンプルのフォルダを開く(LiveServerを使うので)
- サンプル本体内のhtmlを修正する(proposals/phone-ar.html と proposals/phone-ar-hit-test.html)
headタグの最後に下記を追加
<script src="/build/webxr-polyfill.js"></script>
<script type="module">~</script>の中の最初の行に下記を追加
var polyfill = new WebXRPolyfill();
- LiveServerを起動する(このとき127.0.0.1の部分をlocalhostに置き換えてください)
- PCとAndroidを接続してAndroidでURLを開いて動作確認
終わりに
とりあえずサンプルが動作するところまでは確認できました。
完全にメモ状態ですのでこの部分どうするの？みたいなのがあればコメントいただければと思います。