👻

WebXR Incubationフラグが不要になったWebXR Raw Camera Access Moduleを試そうぜ

2022/12/15に公開約2,500字

はじめに

TL;DR

Chrome for Android でWebXR Proposalsを開き、AR Camera Access のサンプルを実行しましょう。

概要・対象読者

本日 XR Kaigi 2022 の WebXR Tech Tokyo + Babylon.js 勉強会のコミュニティオーガナイズドセッションにて、WebXR 実験的機能について登壇しました。その際にご紹介した Raw Camera Access Module が最新の Chrome for Android にて WebXR Incubation フラグなしに実行できるとの情報をいただいたので、実際に試してみようという記事です。

https://www.xrkaigi.com/seminars/49

https://twitter.com/ikkou/status/1603179076297990144

Raw Camera Accessとは

正式名称を WebXR Raw Camera Access Module という、WebXR Device API で提供されるモジュールの一種です。簡単に説明すると、WebAR アプリからカメラ画像にアクセスするための機能で、2022 年現在では Chrome for Android のみ対応しています。

もともとこの機能は WebXR Incubation フラグをchrome://flagsから有効にしないと実行できなかったのですが、デフォルトで提供されるようになっていたみたいですね。
Chrome Status によると Chrome 107 から利用できているみたいなので、2022 年 11 月くらいからでしょうか。
https://chromestatus.com/feature/5759984304390144

Raw Camera Access の詳しい内容については昨年のアドベントカレンダー記事で解説しておりますので、そちらも併せてご覧ください。

https://zenn.dev/drumath2237/articles/52d62638c7d06f

Raw Camera Accessを試す

環境の用意

Raw Camera Access を WebXR Incubation フラグなしで試すにはARCoreに対応したAndroidで動くChrome for Android バージョン107以上が必要です。Chrome for Android 86 以上でも試すことはできますが、フラグの有効化が必要です。
筆者の Pixel 4a 5G(Android 13)および Nexus 5X(Android 8.1)にインストールされているのは Chrome 108 で、どちらも動作を確認しております。

ChromeのProposalへ

手元に環境が用意できたら、Google の WebXR Proposals へアクセスしましょう。
https://storage.googleapis.com/chromium-webxr-test/r1067245/proposals/index.html

その中に「AR Camera Access」という項目があるのでクリックすると、サンプルプロジェクトのページに飛びます。

https://storage.googleapis.com/chromium-webxr-test/r1067245/proposals/camera-access-barebones.html

WebAR が実行できる状態であれば「Enter AR」というボタンがあるはずなのでクリックすると、カメラ画像のテクスチャが張られた Cube がぐるぐる回っているサンプルアプリが開くはずです。

img
サンプルアプリのページ
img
実行結果

Raw Camera Access ではカメラ画像を WebGLTexture として取得するため、Cube のテクスチャにカメラ画像が張られているという感じですね。
これができれば完了です。

おわりに

今回は試してみるだけの簡単な記事になりました。Raw Camera Access がフラグなしで実行できるようになるのはとてもうれしいですね。最新の Android を使ってるユーザなら使用できる可能性がグンと増すので、この API を使うモチベにつながります。
WebXR Device API の普及がどんどんされていくことに期待を込めて、本記事の締めといたします。最後まで読んでいただきありがとうございました。

参考文献

https://github.com/immersive-web/raw-camera-access

https://zenn.dev/drumath2237/articles/52d62638c7d06f

https://storage.googleapis.com/chromium-webxr-test/r1067245/proposals/camera-access-barebones.html

GitHubで編集を提案

Discussion

ログインするとコメントできます