【JavaScript】Webブラウザで動くAR動画の作り方・使い方

2025年3月13日 2025年4月11日

はじめに

AR（Augmented Reality、拡張現実）技術はエンターテインメント、教育、マーケティング、産業用途など、さまざまな分野で注目を集めています。スマートフォンやタブレット、PCなどの普及に伴い、Webブラウザ上で手軽にAR体験を提供できる技術が求められるようになりました。本記事では、JavaScriptを用いてWebブラウザ上でAR動画を実現する方法について、具体例とともに詳しく解説していきます。

初めに、代表的なWebARライブラリである「A-Frame」と「AR.js」を利用した基本的なサンプルコードを紹介し、その仕組みや動作原理、設定方法を順を追って説明します。また、マーカーを利用したAR体験の実装例をベースに解説します。

AR技術の基礎知識

ARは、現実の映像にコンピュータ生成の画像や動画、3Dモデルなどを重ね合わせる技術です。従来のVR（仮想現実）がユーザーを完全に仮想世界へ没入させるのに対し、ARは現実世界に仮想コンテンツを追加することで、現実と仮想の双方の情報を統合した体験を提供します。具体的な例として、スマートフォンのカメラで映した風景の上にナビゲーション情報を表示したり、博物館で展示物に関連する追加情報をオーバーレイ表示するケースが挙げられます。

Webブラウザ上でのAR実装には、以下のようなポイントが重要です。

リアルタイム性： カメラ映像から取得した情報に基づいて、瞬時に仮想コンテンツを配置・表示する必要があります。
プラットフォーム対応： デスクトップ、スマートフォン、タブレットといったさまざまなデバイスで動作させるため、軽量かつ柔軟な技術が求められます。
簡便な実装： 専門的な知識がなくても、HTMLやJavaScriptの基本的な知識でAR体験を実現できるライブラリが好まれます。

ここで紹介する「A-Frame」と「AR.js」は、これらの要求を満たしつつ、比較的シンプルなコードで高度なAR体験を実装できる点が魅力です。

1. Webブラウザで手軽にAR動画！A-FrameとAR.jsを使った簡単なコード

Webカメラを使用し、特定のパターンを持つ画像（Hiroマーカー）を認識することで、ARコンテンツ（動画）を表示するサンプルです。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8" />
    <title>AR動画サンプル</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        a-scene {
            height: 100vh;
        }
    </style>

    <!-- A-Frameライブラリ -->
    <script src="./dist/aframe-master.min.js"></script>
    <!-- AR.jsライブラリ -->
    <script src="./dist/aframe-ar.js"></script>
</head>

<body>
    <!-- a-sceneにarjs属性を追加してARモードに設定 -->
    <a-scene embedded arjs='sourceType: webcam;'>
        <a-assets>
            <video id="myVideo" loop="false" src="./video.webm"> </video>
        </a-assets>
        <!-- Hiroマーカーが認識されたときに、内部のオブジェクトを表示 -->
        <a-marker preset="hiro" id="marker">
            <!-- マーカー上に表示する動画 -->
            <a-video src="#myVideo" width="1.28" height="2.160" position="0 0 0" rotation="-90 0 0"></a-video>
        </a-marker>
        <!-- カメラの定義 -->
        <a-entity camera></a-entity>
    </a-scene>
</body>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const marker = document.getElementById("marker");
        // a-video の内部の HTMLVideoElement を取得
        const myVdeo= document.getElementById("myVideo");

        marker.addEventListener("markerFound", function () {
            // HTMLVideoElement を再生
            myVdeo.play();
        });

        marker.addEventListener("markerLost", function () {
            // HTMLVideoElement を一時停止して先頭に戻す
            myVdeo.pause();
            myVdeo.currentTime = 0;
        });
    });
</script>

</html>

コード解説

WebARライブラリ「A-Frame」と「AR.js」を使って、Webブラウザ上でAR動画を表示するサンプルコードを解説します。

1. HTMLの基本構造とスタイル設定

a-scene { height: 100vh; }

ページ全体の余白をなくし、シーン（a-scene）の高さを画面全体に広げることで、ユーザーにシームレスなAR体験を提供しています。これにより、スマートフォンでもPCでも違和感なく映像が表示されます。

2. JavaScriptライブラリの読み込み

A-Frame：WebGLをベースにした3Dシーンを簡単に記述できるライブラリで、HTMLタグを用いて3Dオブジェクトを定義することができます。

<script src="./dist/aframe-master.min.js"></script>

GitHub（https://github.com/aframevr/aframe）より、ダウンロードしてください。

AR.js：A-Frame上でAR機能を実現するためのライブラリで、Webカメラから取得した映像とマーカー認識機能を提供します。

<script src="./dist/aframe-ar.js"></script>

GitHub（https://github.com/AR-js-org/AR.js）より、ダウンロードしてください。

3. ARシーンの記述

<a-scene embedded arjs="sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">

<a-scene> タグに arjs 属性を追加することで、Webカメラ映像の背景上にARコンテンツを表示できるモードに切り替えています。ここでは、以下の設定がされています。

embedded：シーンをHTMLに埋め込みます。
sourceType: webcam：Webカメラからの映像を背景として使用するARモードになります。
debugUIEnabled: false：デバッグUIを非表示にします。
detectionMode: mono_and_matrix：マーカーの検出モードを設定します。
matrixCodeType: 3x3：マーカーのタイプを3x3マトリックスに設定します。

4. マーカーと動画の設定

<a-assets>
    <video id="myVideo" loop="false" src="./video.webm"> </video>
</a-assets>

id="myVideo"：idにmyVideoを指定します。
loop="false"：ループ再生をせず、1回だけ再生する設定。
src="./video.webm"：動画ファイルのパスを指定します。背景透過の動画を使用します。

<a-marker preset="hiro">

preset="hiro"：一般的な「Hiroマーカー」が認識された場合に内部のコンテンツ（ここでは動画）が表示されます。

<a-video src="#myVideo" width="1.28" height="2.160" position="0 0 0" rotation="-90 0 0"></a-video>

指定された動画ファイル（video.mp4）がHiroマーカー上に3Dオブジェクトとして配置されます。

src="#myVideo"：動画オブジェクトのidを指定します。
width="1.28" height="2.160"：動画のサイズを設定します。
position="0 0 0"：動画の位置を設定します。
rotation="-90 0 0"：動画の回転を設定します。

5. カメラの設定

<a-entity camera></a-entity>

シーン内にユーザーの視点が反映されるカメラを配置します。これにより、ユーザーのカメラ映像とARコンテンツがリンクし、動的な体験を実現します。

動作確認の手順

同じディレクトリに video.webm という名前の動画ファイルを配置します。
distフォルダに、aframe-master\dist内のファイル、AR\AR.js-master\aframe\build内のファイルを設置します。
HTMLファイルをWebブラウザで開くと、Webカメラが起動し、Hiroマーカーをカメラにかざすと動画が再生されます。

サンプルページで動作を確認する

著作　VOICEVOX：ずんだもん　立ち絵：坂本アヒル様
ツール：ずんだもんのプチ音声動画作成ツール

Hiroマーカー

Hiroマーカーは、ARコンテンツを現実空間に正確に配置するための視覚的な基準となるパターンです。一般に、白い背景に黒い図形が描かれたシンプルなデザインで、カメラや専用アプリが容易に認識できるようになっています。印刷物やスマートフォン、PC画面上で表示することで、ARライブラリがマーカーの位置や向きを検出し、その情報に基づいて仮想オブジェクトを配置します。

SVG ダウンロード

JPEG ダウンロード

PNG ダウンロード

2. 画像認識AR（MindAR）

画像認識ARは、特定の画像（ポスター、広告、書籍の表紙など）を認識し、その画像に合わせてARコンテンツを配置する手法です。マーカーのような専用パターンではなく、実際に普段目にする画像を認識対象とするため、ユーザーにとって直感的な体験が得られます。

画像認識ARを実現するには、専用のライブラリ（例：MindAR、8th WallのWebARソリューションなど）を使用する方法があります。たとえば、MindARは軽量なWebARライブラリで、画像認識機能を備えており、複数のターゲット画像に対応できます。以下は、MindARを用いた基本的な実装例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像認識ARサンプル</title>
  <style>
    body { margin: 0; overflow: hidden; }
    #ar-container { position: relative; width: 100vw; height: 100vh; }
  </style>
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image-aframe.prod.js"></script>
</head>
<body>
  <div id="ar-container">
    <a-scene mindar-image="imageTargetSrc: ./targets.mind;" embedded>
      <a-camera position="0 0 0"></a-camera>
      <a-entity mindar-image-target="targetIndex: 0">
        <a-video src="./video.mp4" width="2" height="1" position="0 0 0" rotation="0 0 0"></a-video>
      </a-entity>
    </a-scene>
  </div>
</body>
</html>

この例では、MindARライブラリ（https://hiukim.github.io/mind-ar-js-doc/）を利用して、任意の画像（targets.mindファイルに定義）をターゲットとし、その上に動画を配置しています。
ユーザーが認識対象の画像をカメラに映すと、対応するARコンテンツ（動画）が表示される仕組みです。
MindARは軽量で高速な動作が特徴で、複数ターゲットの認識や高精度なトラッキングが可能です。
mindar-image.prod.js と mindar-image-aframe.prod.js は、画像認識ARを実現するためのライブラリです。前者は基本的な画像認識機能、後者は A-Frame と連携して3Dオブジェクトを配置するための拡張機能を提供します。

<a-scene mindar-image="imageTargetSrc: ./targets.mind;" embedded>
  ...
</a-scene>

<a-scene>：A-Frame のシーンタグで、3DコンテンツやARオブジェクトを配置する土台です。
mindar-image 属性：imageTargetSrc: ./targets.mind; は、画像認識のターゲットデータが格納されたファイル（ここでは targets.mind）を指定しています。これにより、カメラ映像内の特定の画像を検出できるようになります。
embedded 属性：シーンをページ内に埋め込む設定です。これにより、ブラウザ全体を専用のARビューにするのではなく、特定の要素内でAR体験を実現します。

動作確認

サンプルページで動作を確認する

.mindファイルについて

「targets.mind」ファイルは、MindARライブラリにおける画像認識機能を実現するための重要な設定ファイルです。このファイルには、AR体験で使用するターゲット画像（認識対象となる画像）の情報が事前にエンコード・解析されたデータが含まれており、リアルタイムの画像追跡に必要な特徴量やマーカー情報が格納されています。

MindARが提供するオンラインジェネレーター：https://hiukim.github.io/mind-ar-js-doc/tools/compile

用意した認識マーカー用の画像をアップロードします。

「Download compied」ボタンで「targets.mind」をダウンロードできます。

3. AR動画を実装する際の注意点

AR動画の開発を進めるにあたって、いくつかの注意点があります。

1. デバイスの性能

ARはリアルタイムで映像を処理するため、使用するデバイスの性能が体験の質に直結します。低スペックのスマートフォンやPCでは、フレームレートが低下したり、遅延が発生する可能性があるため、対象とするユーザーの環境を考慮して実装や最適化を行いましょう。

2. 照明環境とマーカー認識

マーカー認識は、カメラの映像に依存するため、十分な明るさやコントラストが必要です。特に屋内や暗所での利用時には、正確な認識が難しくなる場合があるため、環境に合わせた調整や、場合によっては画像認識AR（例：MindARなど）の利用も検討してください。

3. ユーザーインターフェースの工夫

AR動画は従来の動画再生と異なり、ユーザーのカメラ操作や視線移動に連動するため、操作方法やインターフェースのデザインに工夫が求められます。使いやすさと直感的な操作性を両立させることで、初心者でもストレスなく利用できるAR体験を提供できます。

4. AR動画の使い方

AR動画は、さまざまな分野での活用が進んでおり、既に多くの現場で実用化されています。また、技術の進化とともに、今後さらに幅広い用途への展開が期待されています。以下に、現状の利用例と今後の可能性について解説します。

現在の活用事例

エンターテインメント・イベント
ライブコンサートや舞台公演、フェスティバルなどで、AR動画を用いることで舞台上に仮想のキャラクターや特殊効果を表示し、観客により印象的な体験を提供します。たとえば、スマートフォンのカメラをかざすと、目の前にキャラクターが現れ、ストーリーが展開される仕組みは、従来の映像とは一線を画した新たなエンターテインメント体験です。
マーケティングと広告
企業は、製品の魅力を伝えるためにAR動画を活用しています。製品パッケージにスマートフォンをかざすと、商品の使用シーンや詳細情報が動画で再生される仕組みは、消費者に対して直感的な理解を促すと同時に、ブランドの印象を強化します。また、店舗内でのプロモーションやイベントでもAR動画を活用することで、来店客に新たな購買体験を提供することができます。
教育と博物館展示
教育現場や博物館では、AR動画が学習補助ツールとして活用されています。歴史的な出来事や科学的現象、芸術作品に関連する情報をAR動画で解説することで、従来のテキストや静止画像だけでは伝わりにくい情報を視覚的かつ体験的に学ぶことができます。実際の展示物に合わせた解説動画が表示されることで、学習効果の向上が期待されます。
産業用途とメンテナンス支援
製造現場や建設現場など、専門的な作業が必要な現場では、AR動画が作業手順やメンテナンス方法のガイドとして利用されています。作業員がスマートフォンやタブレットを通して現場を撮影すると、必要な情報や注意点がAR動画として表示され、迅速な対応が可能になります。また、遠隔地の専門家がリアルタイムで指示を出すリモート支援にも応用されており、作業効率や安全性の向上に寄与しています。

今後の展望

日常生活へのさらなる浸透
専用のARグラスやウェアラブルデバイスが普及することで、AR動画はスマートフォンに限定されず、日常のあらゆるシーンで活用されるようになります。例えば、観光地での歴史解説や、買い物中の商品の使用イメージをリアルタイムで表示するなど、生活の質を向上させるツールとして期待されます。
パーソナライズドな体験の実現
AI技術との連携により、ユーザーの行動や環境に合わせた最適なAR動画コンテンツの提供が可能になると考えられます。利用者一人ひとりのニーズに応じた情報がリアルタイムで表示されることで、より個別化されたエンターテインメントや教育体験が実現されるでしょう。
遠隔支援やリモートコラボレーション
コロナ禍で注目されたリモート技術の進化に伴い、AR動画は遠隔地にいる技術者や医師が現場の状況を共有し、リアルタイムで指示やサポートを行うツールとしての役割も期待されています。これにより、迅速な問題解決や教育、訓練の効率化が進むと予測されます。
新たなクリエイティブ分野の開拓
技術環境が整備されることで、従来の映像制作の枠を超えた革新的なARコンテンツが多数登場するでしょう。新進気鋭のクリエイターたちがAR動画を用いた斬新な表現方法を追求することで、エンターテインメントや広告、文化・芸術分野において新たなムーブメントが生まれる可能性があります。

おわりに

Webブラウザ上で実現できるAR動画技術は、従来のARアプリケーションに比べ手軽に導入できる点が大きな魅力です。A-FrameとAR.jsをはじめとするライブラリの登場により、開発の敷居が下がり、クリエイティブな表現の幅が格段に広がりました。また、WebXR APIなどの新技術の普及により、今後はよりリアルタイム性やインタラクション性に優れたAR体験が可能になると考えられます。

本記事で紹介したサンプルコードや解説、応用例を通じて、AR技術の基礎から応用までを幅広く学び、実際のプロジェクトへの展開に役立てていただければ幸いです。AR動画を活用した新たな表現方法は、今後のデジタルコンテンツ制作において、ますます重要な位置を占めることでしょう。

今後も技術の進化とともに、より高度で革新的なAR体験が登場することが期待されます。最新のライブラリやAPIのアップデート、そしてユーザーからのフィードバックを積極的に取り入れ、常に最適な体験を提供することが、AR開発における成功の鍵となります。

ぜひ、この記事をきっかけに自分自身のARプロジェクトを始め、創造性あふれる新たなコンテンツを生み出してください。ご質問や意見、実際の開発事例などがあれば、コミュニティと共有することで、更なる技術向上とイノベーションにつながるはずです。

PR広告

楽天ブックスでAR（拡張現実）の本を探す

カテゴリー: Javascript

タグ: AR AR動画カメラ