Unreal Engine 4 (UE4) のメディア フレームワークは、エンジン内でプレイ可能なメディア形式でビデオ /オーディオのキャプチャ デバイスに対応しています。 例えば、ウェブカムから送られてくるライブ映像を受け取り、スタティックメッシュ上あるいは HUD の一部として UE4 で直接プレイすることができます。 あるいは、プロジェクトをモバイル デバイスにデプロイして、フロントまたはバックカメラから送られた映像を取り出してアプリケーションの中で再生することができます。
このセクションではサンプルを使って、キャプチャ映像を受け取り、それをゲームプレイ中に HUD の一部として表示していきます。

現在 Electra Media Player は Live Video Capture 再生をサポートしていません。
ステップ
この操作ガイドでは Starter Content Enabled (スターター コンテンツを有効にした状態) で Blueprint Third Person Template プロジェクトを使います。 さらに、コンピューターにはウェブカムを搭載する必要があります。
-
[Sources] パネルを展開して [Movies」 という名前のフォルダを作成します。そしてその中に Media Player、および、それを紐づいている Media Texture アセットを 「MediaPlayer」 という名前で作成します。
-
MediaPlayer アセットを開いて [Media URL] フィールドの横をクリックし [Capture Devices] を展開します。カメラはこの [Video] の中に入っています。
パソコンの設定によっては、表示されるキャプチャ デバイス数と名前がこのスクリーンショットとは異なる場合があります。
ビデオ キャプチャ デバイスを選択すると、カメラからの映像がメディア エディタ プレイヤーに表示されます。
-
Media URL 欄に表示されている Media URL 文字列をハイライトして右クリックでコピーします。
パソコンの設定によっては、表示される URL 文字列がこのスクリーンショットとは異なる場合があります。
-
コンテンツ ブラウザ を右クリックし、[User Interface] の [Widget Blueprint] を選択して 「HUD」 と名前を付けます。
ユーザー インターフェースの Media Texture を使って、ウェブカムで撮った映像を HUD でピクチャ イン ピクチャで表示してみましょう。
-
HUD ウィジェット ブループリントを開いたら [コンテンツ ブラウザ] から MediaPlayer_Video を HUD グラフにドラッグアンドドロップします。[Appearance] の [Image] フィールドに動画が追加されていることがわかります。
-
HUD ウィジェット ブループリントを閉じて、メイン ツールバーの [Blueprints] をクリックし [Open Level Blueprint] を選択します。
メディア ソースを直接開かずにメディア URL をコピーしていますが、ランタイム時にプレイするためにはメディア ソースを開いておく必要があります。
-
[MyBlueprint] パネルで Media Player Reference 型の [MediaPlayer] という変数を作成し、MyPlayer に割り当てます。
Media Player 変数の デフォルト値 を割り当てる前に [Compile] をクリックしてブループリントをコンパイルする必要があります。
-
Ctrl を押しながら MediaPlayer 変数をグラフへドラッグし、右クリックして Event BeginPlay ノードを追加します。
アクションの実行先となるメディア プレイヤーへの参照およびゲーム プレイの開始を知らせる イベント を作成しました。
-
右クリックして Create Widget ノード (HUD を クラス として) を追加し、Return Value の出力を以下のように Add to Viewport に接続します。
ここで、ゲームの開始時を指示し、HUD ウィジェット ブループリントを作成し、プレイヤーのビューポートに追加します。
-
グラフの Media Player ノードを引き出し Open URL に ステップ 3 でコピーした URL をペーストして以下のように接続します。
ここでエディタをプレイすると、ウェブカムからの映像がさきほど配置した HUD 上に表示されます。
このサンプルではメディア URL を指定して開きましたが、メディア URL が分からない場合もあります。 この機能を使うと、プロジェクトをパッケージ化および配布して、エンドユーザーの接続先キャプチャ デバイス情報を取得して、そのどれかを使用することができます。 あるいは、プロジェクトをモバイル デバイスにデプロイして、フロントまたはバックカメラから取得した映像ををメディア ソースとして使うと良いかもしれません。 Enumerate Capture Devices 関数を使って搭載したすべてのキャプチャ デバイスを戻し、デバイス情報を取得します。
-
グラフを右クリックして Enumerate Video Capture Devices 関数を追加します。
オーディオ / ビデオ / ウェブカム キャプチャ デバイス用の列挙型の値があります (モバイル デバイスにウェブカムを使う場合はフロント / バックカメラの取得が可能です)。
-
Filter ピンを引き出して Make Bitmask ノードを使用します。
Make Bitmask ノードを使って、デバイスの特定のサブセットのフィルタリングを行うことができます。
-
Make Bitmask ノードを選択して、[Details] パネルで [Bitmask Enum] を [EMediaVideoCaptureDeviceFilter] に変更し、フィルタリングでそれぞを有効にします。
有効にしたそれぞれのオプションをフィルタリングしてキャプチャ デバイスを戻している様子です (いらないものを省いて、戻されたデバイスのリストを小さくすることができます)。
-
Out Devices から Get Copy ノードに接続し、ピンを引き出し、Break MediaCpatureDevice ノードを以下のように Open URL に接続します。
画像をクリックしてフルサイズで表示
すると、先に使用可能なデバイスを見つけ、Open URL を使って再生するソースを開くための URL を戻します。
-
レベル ブループリントを コンパイル して終了します。メイン ツールバーの [Play] ボタンをクリックしてエディタでプレイします。
最終結果
エディタでプレイすると、カメラから送られてきた映像はエンジンで実行され、HUD に表示されます。
モバイル デバイスでフロント / バックカメラを取得する手順は以下の通りです。
- Enumerate Video Capture Devices ノードを使って Bitmask Enum を EMediaWebcamCaptureDeviceFilter オプションに設定します。
- Make Bitmask ノードで、取得したいカメラにフラグを立てます。
