Unity + Vuforia でARな動画再生を試してみた

# はじめに

[前回の記事](http://qiita.com/JunSuzukiJapan@github/items/14b14f9608b75bd325d8)で、Vuforiaの基本的な使い方を書いた（アレだけでは到底つかえないと思われるが…）。

今回は、画像を認識して、その上で動画を再生する方法のメモ。

# オブジェクトの準備（配置）

１．Main Cameraを削除する。
２．Qualcomm Augmented Reality/Prefabs/ARCameraを画面に追加する。
３．Qualcomm Augmented Reality/Prefabs/ImageTargetを画面に追加する。
　　ARCameraの真正面にImageTargetがくるようにすると良い。
　　（ARCameraもImageTargetもポジションをx:0, y:0, z:0 にしてから調節するとやりやすい。）
４．Directional Lightをメニューの"GameObject"→"Create Other"→"Directional Light"で配置する。
　　ImageTargetにうまくライトが当たるようにしておく。

![スクリーンショット 0025-10-02 16.47.35.png](https://qiita-image-store.s3.amazonaws.com/0/20722/d5abb34f-7c37-1cc1-dcb4-25c31e533eb5.png "スクリーンショット 0025-10-02 16.47.35.png")

５．Vuforia Video Playback/Prefabs/VideoをImageTargetの子要素として配置する。

すべて配置した後の感じは以下。

![スクリーンショット 0025-10-02 14.34.22.png](https://qiita-image-store.s3.amazonaws.com/0/20722/6065645a-1a33-d1fd-d77e-b40270e24554.png "スクリーンショット 0025-10-02 14.34.22.png")

![スクリーンショット 0025-10-02 14.34.16.png](https://qiita-image-store.s3.amazonaws.com/0/20722/7c5d9653-b3e9-d7f8-7f81-7202bccc33da.png "スクリーンショット 0025-10-02 14.34.16.png")



# ARCameraの設定

まずはARCameraの設定をします。

### 認識させたい画像にチェックをいれる。

インスペクタでData Set Load Behaviourスクリプトで、"Load Data Set （使いたいデータセット名）"にチェックをいれ、"Activate"が表示されますのでそれにもチェックをいれます。

![スクリーンショット 0025-10-02 14.34.50.png](https://qiita-image-store.s3.amazonaws.com/0/20722/3809f943-9652-754d-bdc0-431dc31bc3b4.png "スクリーンショット 0025-10-02 14.34.50.png")


### 動画再生用スクリプトを追加する

動画を再生するには、ARCameraにそれ用のスクリプトを追加する必要があります。

![スクリーンショット 0025-10-02 14.34.38.png](https://qiita-image-store.s3.amazonaws.com/0/20722/089dd7c7-4131-f437-430f-b4e0872027ef.png "スクリーンショット 0025-10-02 14.34.38.png")

ScriptsフォルダにあるVideoPlaybackControllerをARCameraに追加してやります。

ARCameraの最終的な設定は以下のようになります（参考）。

![スクリーンショット 0025-10-02 14.35.16.png](https://qiita-image-store.s3.amazonaws.com/0/20722/f2fd1034-4dc7-f16b-1391-7146ec16efe0.png "スクリーンショット 0025-10-02 14.35.16.png")



# ImageTargetの設定

ImageTargetでは、認識させたい画像を設定することが出来ます。

## 画像の設定

インスペクタでImage Target Behaviourスクリプトで、Data SetとImage Targetを認識させたい画像に設定します。

![スクリーンショット 0025-10-02 16.37.38.png](https://qiita-image-store.s3.amazonaws.com/0/20722/f38d6453-b5dd-3d92-8cad-1d4c1a836713.png "スクリーンショット 0025-10-02 16.37.38.png")


## スクリプトの設定

Default Trackable Event Handlerスクリプト を ScriptsフォルダにあるTrackableEventHandler スクリプトで置き換えます。

![スクリーンショット 0025-10-02 19.15.56.png](https://qiita-image-store.s3.amazonaws.com/0/20722/c7cfa84b-aa49-776b-6d83-6040c65199f2.png "スクリーンショット 0025-10-02 19.15.56.png")


![スクリーンショット 0025-10-02 19.13.23.png](https://qiita-image-store.s3.amazonaws.com/0/20722/4ce00f38-3043-c02e-a129-00322fe35c18.png "スクリーンショット 0025-10-02 19.13.23.png")

↑これを、↓これに変更する。

![スクリーンショット 0025-10-02 19.04.57.png](https://qiita-image-store.s3.amazonaws.com/0/20722/86f6dca4-2140-2157-bdde-51e301dd0b9c.png "スクリーンショット 0025-10-02 19.04.57.png")



# Videoの設定

再生する動画を設定します。

最初からついてくる（？）動画が、StreamingAssetsフォルダにあるので、今回はこれを再生します。
VuforiaSizzleReel_1と2というのが動画ファイルになりますが、これはFinderで見ると拡張子".m4v"がついたちゃんとした動画ファイルになっています。
自作の動画を再生したい場合もm4v形式の動画をこのフォルダにいれて使えばおそらく再生できるのではないかと思います。

![スクリーンショット 0025-10-02 17.07.48.png](https://qiita-image-store.s3.amazonaws.com/0/20722/42b59fc8-2e7d-d83c-b68c-b5afe77fcbc9.png "スクリーンショット 0025-10-02 17.07.48.png")


Videoオブジェクトを選択すると、

![スクリーンショット 0025-10-02 17.11.26.png](https://qiita-image-store.s3.amazonaws.com/0/20722/70d1592d-a026-9587-24ec-2f8b12a82b46.png "スクリーンショット 0025-10-02 17.11.26.png")


Video Playback Behaviourスクリプトがありますので、そこの"Path"に先ほどの動画ファイル名（拡張子を含む）をいれてやります。


![スクリーンショット 0025-10-02 17.11.32.png](https://qiita-image-store.s3.amazonaws.com/0/20722/3308d0c2-f497-14bd-39c7-6ecf375ab55a.png "スクリーンショット 0025-10-02 17.11.32.png")


これで動画再生のための設定はすべてです。
あとはビルドしてiPhoneなどで動作を確認しましょう。


## 補足

>Vuforia Video Playbackの入手の仕方を教えてください

というメールをいただいたので、入手方法を記載しておきます。

https://developer.vuforia.com/downloads/samples

上記URLの"Advanced Topics"のところの"Download Sample Projects for Unity"からダウンロードしたなかにVideoPlayback-X-X-XXX.unitypackageという名前のサンプルプロジェクトが含まれていますので、それを使ってください。