Unreal Engine 5 ドキュメントは Epic Developer Community に移動しました

キャプチャしたライブ映像のプレイ方法

キャプチャしたライブ映像を抽出し、メディア フレームワーク ツールを使って UE4 でプレイする方法

Choose your operating system:

Windows

macOS

Linux

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

このセクションではサンプルを使って、キャプチャ映像を受け取り、それをゲームプレイ中に HUD の一部として表示していきます。

WebCamHero.png

現在 Electra Media Player は　Live Video Capture 再生をサポートしていません。

ステップ

この操作ガイドでは Starter Content Enabled (スターター コンテンツを有効にした状態) で Blueprint Third Person Template プロジェクトを使います。 さらに、コンピューターにはウェブカムを搭載する必要があります。

  1. [Sources] パネルを展開して [Movies」 という名前のフォルダを作成します。そしてその中に Media Player 、および、それを紐づいている Media Texture アセットを 「MediaPlayer」 という名前で作成します。

    WebCam_01.png

  2. MediaPlayer アセットを開いて [Media URL] フィールドの横をクリックし [Capture Devices] を展開します。カメラはこの [Video] の中に入っています。

    WebCam_02.png

    パソコンの設定によっては、表示されるキャプチャ デバイス数と名前がこのスクリーンショットとは異なる場合があります。

    ビデオ キャプチャ デバイスを選択すると、カメラからの映像がメディア エディタ プレイヤーに表示されます。

  3. Media URL 欄に表示されている Media URL 文字列をハイライトして右クリックでコピーします。

    WebCam_03.png

    パソコンの設定によっては、表示される URL 文字列がこのスクリーンショットとは異なる場合があります。

  4. コンテンツ ブラウザ を右クリックし、 [User Interface] の [Widget Blueprint] を選択して 「HUD」 と名前を付けます。

    WebCam_04.png

    ユーザー インターフェースの Media Texture を使って、ウェブカムで撮った映像を HUD でピクチャ イン ピクチャで表示してみましょう。

  5. HUD ウィジェット ブループリントを開いたら [コンテンツ ブラウザ] から MediaPlayer_Video を HUD グラフにドラッグアンドドロップします。 [Appearance] の [Image] フィールドに動画が追加されていることがわかります。

    WebCam_06.png

  6. HUD ウィジェット ブループリントを閉じて、メイン ツールバーの [Blueprints] をクリックし [Open Level Blueprint] を選択します。

    WebCam_07.png

    メディア ソースを直接開かずにメディア URL をコピーしていますが、ランタイム時にプレイするためにはメディア ソースを開いておく必要があります。

  7. [MyBlueprint] パネルで Media Player Reference 型の [MediaPlayer] という変数を作成し、 MyPlayer に割り当てます。

    WebCam_08.png

    Media Player 変数の デフォルト値 を割り当てる前に [Compile] をクリックしてブループリントをコンパイルする必要があります。

  8. Ctrl を押しながら MediaPlayer 変数をグラフへドラッグし、右クリックして Event BeginPlay ノードを追加します。

    WebCam_09.png

    アクションの実行先となるメディア プレイヤーへの参照およびゲーム プレイの開始を知らせる イベント を作成しました。

  9. 右クリックして Create Widget ノード ( HUD を クラス として) を追加し、 Return Value の出力を以下のように Add to Viewport に接続します。

    WebCam_10.png

    ここで、ゲームの開始時を指示し、HUD ウィジェット ブループリントを作成し、プレイヤーのビューポートに追加します。

  10. グラフの Media Player ノードを引き出し Open URL に ステップ 3 でコピーした URL をペーストして以下のように接続します。

    WebCam_11.png

    ここでエディタをプレイすると、ウェブカムからの映像がさきほど配置した HUD 上に表示されます。

    WebCam_12.png

    このサンプルではメディア URL を指定して開きましたが、メディア URL が分からない場合もあります。 この機能を使うと、プロジェクトをパッケージ化および配布して、エンドユーザーの接続先キャプチャ デバイス情報を取得して、そのどれかを使用することができます。 あるいは、プロジェクトをモバイル デバイスにデプロイして、フロントまたはバックカメラから取得した映像ををメディア ソースとして使うと良いかもしれません。 Enumerate Capture Devices 関数を使って搭載したすべてのキャプチャ デバイスを戻し、デバイス情報を取得します。

  11. グラフを右クリックして Enumerate Video Capture Devices 関数を追加します。

    WebCam_13.png

    オーディオ / ビデオ / ウェブカム キャプチャ デバイス用の列挙型の値があります (モバイル デバイスにウェブカムを使う場合はフロント / バックカメラの取得が可能です)。

  12. Filter ピンを引き出して Make Bitmask ノードを使用します。

    WebCam_14.png

    Make Bitmask ノードを使って、デバイスの特定のサブセットのフィルタリングを行うことができます。

  13. Make Bitmask ノードを選択して、 [Details] パネルで [Bitmask Enum] を [EMediaVideoCaptureDeviceFilter] に変更し、フィルタリングでそれぞを有効にします。

    WebCam_14b.png

    有効にしたそれぞれのオプションをフィルタリングしてキャプチャ デバイスを戻している様子です (いらないものを省いて、戻されたデバイスのリストを小さくすることができます)。

  14. Out Devices から Get Copy ノードに接続し、ピンを引き出し、 Break MediaCpatureDevice ノードを以下のように Open URL に接続します。

    WebCam_16.png

    画像をクリックしてフルサイズで表示

    すると、先に使用可能なデバイスを見つけ、Open URL を使って再生するソースを開くための URL を戻します。

  15. レベル ブループリントを コンパイル して終了します。メイン ツールバーの [Play] ボタンをクリックしてエディタでプレイします。

最終結果

エディタでプレイすると、カメラから送られてきた映像はエンジンで実行され、HUD に表示されます。

モバイル デバイスでフロント / バックカメラを取得する手順は以下の通りです。

  • Enumerate Video Capture Devices ノードを使って Bitmask Enum を EMediaWebcamCaptureDeviceFilter オプションに設定します。

  • Make Bitmask ノードで、取得したいカメラにフラグを立てます。

WebCam_15.png

Unreal Engine のドキュメントを改善するために協力をお願いします！どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
キャンセル