はじめに
GMOグローバルサイン・ホールディングス CTO室 所属のはが（@mxcn3）です。
以前の記事では、「Meta Questでのボディトラッキングについて」を紹介しました。
今回は、Meta Quest の v77 アップデートで WebXR に追加された パススルーカメラ API を実際に試した内容を紹介します。
パススルーカメラ APIについて
Meta Quest v77で提供開始されたパススルーカメラ APIは、WebXRアプリケーションがブラウザからカメラにアクセスするための機能です。デバイスのカメラ映像をWebブラウザからリアルタイムで取得し利用できます。
v76とv77以降の違い
| 項目 | v76まで | v77以降 |
|---|---|---|
| パススルーカメラ API | ネイティブアプリのみ利用可能 | ブラウザからgetUserMedia() で直接取得可能 |
Meta Questでは、v76まではネイティブアプリのみが対応していましたが、アップデートによりウェブページからもパススルーカメラ映像を利用できるようになりました。これにより、ビデオ通話などカメラを使用するウェブアプリケーションもヘッドマウントディスプレイから利用できます。
検証環境
今回の検証で使用した環境は以下の通りです。
| 項目 | 内容 |
|---|---|
| デバイス | Meta Quest 3（v78） |
| ブラウザ | Quest Browser 39.0 |
実装手順とデモ
まずは、今回作成したデモページをご覧ください。
Webページを開くと、最初に「没入体験でアバターの写真や動画を撮影することを許可しますか？」というダイアログが表示されますので、許可してください。
Meta Quest 3でアクセスすると、デバイスに搭載されている3つのカメラを切り替えて表示できることが確認できます。
デバイスに接続されているカメラ情報の取得
デモでは、まずカメラの一覧をウェブページ上に表示し、ユーザーが選択したカメラに切り替えて映像を取得しています。これらの実装は、JavaScriptでenumerateDevices()メソッドを実行することで、デバイスの一覧を取得しカメラのみを抽出しています。
// デバイスの一覧を取得
const devices = await navigator.mediaDevices.enumerateDevices();
// カメラのみ抽出
const cameras = devices.filter(device => device.kind === 'videoinput');
このメソッドは、モバイルやデスクトップ環境でも同様に利用できます。
Meta Quest 3で実行した場合、以下の3つのカメラデバイスが取得できます。
1. フロントカメラ
ユーザーのアバター用映像を取得できます。ビデオ会議などでも利用できます。
2. バックカメラ（左・右）
バックカメラは左と右のそれぞれを取得できます。これらは実際のカラーパススルー映像を取得できます。
カメラ映像の取得
カメラの映像を取得するには、enumerateDevicesの結果で取得したデバイスIDを使ってgetUserMedia()を呼び出し、特定のカメラを起動します。
const stream = await navigator.mediaDevices.getUserMedia({
video: { deviceId }, // デバイスIDを指定
audio: false
});
このgetUserMedia()の結果を<video>要素やWebGLで利用することで、カメラ映像をリアルタイムで利用できます。
デモ
この方法で、Meta Quest単体およびMeta Quest Browser上で、アバターの動きと左右のカメラのパススルー映像を確認できました。
応用例として、パススルー映像をマルチモーダルLLM（今回はGemini Flash 2.5）へ送信し、ユーザーの目の前にある物体を説明するデモを作成しました。
パススルーカメラ APIの登場により、ブラウザからパススルー映像を直接扱えるようになりました。パススルー映像はヘッドマウントディスプレイと相性が良く、ブラウザから手軽にアクセスできるようになったため、今後の応用が期待できます。
この記事で紹介した内容や実装について、ご質問や不明点がありましたら、お気軽にX: @mxcn3までご連絡ください。
