🖼️

(UE4) UMGを使って、SDIからメディアフレームワーク

2021/02/09に公開

Unreal Engine

UE4

tech

＊概要
SDIから入力した映像を、UMGを使ってゲームに表示させる方法。

[注意]:この記事は、Blackmagicのビデオカードを使用したメディアフレームワークになります。
AJAのカードを使用する場合は、こちらの公式ドキュメントをご参照ください。

＊作業環境
UE:4.26.1
OS:Windows10
ビデオカード:Blackmagic DeckLink 8K Pro

メディアフレームワークとは

＊以前の記事↓で概要と機能を簡単にまとめています。
(UE4)Media frameworkの概要：機能説明_1

UE4でいうメディアフレームワークとは、ゲーム内で映像を再生させるためのシステムです。
デバイス上の映像だけでなく、ウェブ上のメディアをストリーミングしたり、プレイリストを作成したりできます。
また、レンダリングしたメディアをテクスチャとして扱う事で、オブジェクトに映像を投影することも可能です。

今回やること

今回は、SDIから入力した16:9の映像を、UMGを使ってゲーム全画面に表示、再生させたいと思います。
UMGを使う事で、例えば表示/非表示の機能が簡単なノードで実装できたりします。

準備

用意するもの

・Blackmagicのビデオカード
＊映像の入力/出力には、UEサポート対象であるAJAかBlackmagicのカードがマシンに搭載されている必要があります。今回は、BlackmagicのDeckLink 8k Proを使用しています。
・SDI入力用の映像

プラグイン

以下のプラグインを[Enabled(有効)]にします。
・Blackmagic Media Player

・Media Framework Utilities

チェックしたら、[Restart Now]をクリックして再起動しましょう。

手順

1_映像を取得する

コンテンツブラウザで右クリックし、MediaからBlackmagic Media Sourceを追加します。

このアセットを作成する事で、Blackmagicのカードに入力された映像信号を呼び出す事ができます。

詳細を開いて、Configurationからデバイスや映像のセットアップを行います。

今回の映像は1080pの30fpsです。

ソースを作成したら、次は映像を再生するプレイヤーを作りましょう。
先ほどと同じ方法で、Media Playerを追加します。

＊追加する際、↓の様なウィンドウが表示されます。

「アセットをこのMediaPlayerにリンクさせるかどうか」という内容で、これにチェックをつけると、このアセットに関連したMedia Textureの作成/割り当てが自動的に行われます。

チェックしてOKをクリックすると、

Media Playerと一緒に、Media Player_Videoというアセットが作成されました。
こちらも後ほど使用しますが、まずはMedia Playerを開きます。

Nameの欄に、先ほど作成したBlackmagic Media sourceが表示されているので、ダブルクリック選択しましょう。

映像が表示されました。

＊入力している映像と表示されている映像の色味が違う場合
↑のスクリーンショットもそうですが、入力元の映像に比べて色味が薄くなっています。
原因としてまず一番に考えられるのが、Blackmagic Media Source上の設定です。
作成したソースの詳細に戻り、Videoタブを見てみます。

Is SRGBInputのチェックが外れています。
この場合、入力された映像や画像データの色は、ガンマ補正がかからずにリニアで表示されます。
元になる映像がsRGB規格であれば、このチェックを付ける事で元に近い色を再現する事が可能です。

チェックを入れて、Media Playerからソースを開き直してみます。

全体の色が引き締まり、元に近い見た目になりました。

以上で、表示させる映像の用意はできました。
次はゲーム画面上に映像を表示させるための仕組みを作ります。
＊ここまでの作業をまとめたMedia Bundleというアセットもあり、プレビュー以上の用途がなければこちらを使用した方が効率的かと思います。

2_映像を表示する

コンテンツブラウザから新しいウィジェットを作成しましょう。

キャンバスサイズを映像と同じ1920×1080に直します。
＊本当はここで一手間必要なのですが、一旦このまま進めます。

このキャンバスの上に、コンテンツブラウザからMedia Player_Videoをドラッグ&ドロップします。
（この辺、テクスチャ化等をすっ飛ばしているので、あまり良い方法では無いかもしれません…）

自動的にImageパネルが作成され、その上に映像が反映されます。
右上のSlotから位置/サイズを調整しましょう。

ウィジェットはひとまず完成として、これを呼び出すBPを作ります。

レベルBPを開いて、まずは変数を作ります。

Variable TypeからMedia PlayerのObject Referenceを選んでコンパイルします。

Default Valueから、作成したMedia Playerを選びましょう。

変数ができたら、以下のノードを組みます。

ゲーム起動時に、Media Playerで選択されているソースが開く仕組みです。
これを組まないと、ゲームを開始してもソースが開かずに映像を取得できません。

次に、ウィジェットを呼び出すノードです。

これで、ゲームを起動すると映像が表示される様になりました。
この後にある検証の為、New Editor Window(PIE)でプレイしてみます。

無事、SDIからの映像入力がUMGを通してゲーム上に表示されました。

しかし、一つ問題があります。
実行中のウィンドウサイズを小さくしてみましょう。

映像が見切れてしまいました。
ウィンドウのサイズに適応し切れず、途中で縮小が止まってしまった様です。

これを解消するためには、ウィジェットを編集する必要があります。
もう一度UMGの編集画面に戻りましょう。

まず、縮小した際の映像が画面上の方に偏っているのは、
Imageパネルのアンカーが原因です。

アンカーが右上に配置されていました。
これを、SlotのAnchorsから、真ん中のレイアウトを選びます。

この状態でまた実行し、ウィンドウを縮めてみましょう。

配置は維持できました。
ですが、まだ見切れてしまっています。

もう一度編集画面に戻ります。

現状ではCanvas Panelがルートになっていますが、
Canvas Panelを右クリックし、Warp With…>Scale Boxを選択します。

Canvas PanelがScale Boxの下に置かれました。
前回の記事（(UE4)(UMG)実行時のウィンドウサイズに適合したウィジェットを作る）でもまとめましたが、このパネルの子になったウィジェットは、アスペクト比を維持しつつボックス内の領域に合わせて拡大縮小が可能になります。

プレイして再度検証してみましょう。

16:9を維持したまま、ウィンドウサイズに適応して縮小できました。

まとめ

・ソースを作成したら、BPでOpen Sourceを組む必要がある。
・UMGのパネルは、右クリックから親を変更（？）できる。

個人的に「なるほど」と思ったポイントでした。

参考:公式ドキュメントBlackmagic Video I/O クイックスタート
使用した映像素材:https://pixabay.com/videos/id-63283/