Stream Media Source は Unreal Engine 4 (UE4) 内で サポートされた URL 形式のビデオのストリーミングを可能にするアセットです。 ストリームを定義すると、Media Player アセットを使って UE4 内でのロードおよびプレイが可能となり、ストリームを (関連づいている Media Texture を使って) レベルの各種特性へ割り当てることができます。
ストリームは、UI エレメントの一部としてのロードおよびプレイはもちろん、全画面でのプレイ、スタティックメッシュ (TV などの) への適用、レベル内でのプレイさえも可能にします。
このページの操作ガイドでは、Unreal Motion Graphics (UMG) を使って、ストリーミングされたビデオを全画面でプレイする UI エレメントを作成します。
推奨設定
この操作ガイドでは Starter Content Enabled (スターター コンテンツを有効にした状態) で Blueprint Third Person Template プロジェクトを使います。
1. ストリーミング メディア ソースとテクスチャを作成する
-
[コンテンツ ブラウザ] の [Sources Panel] を展開、「Content」 フォルダ内に 「Media」 という名前で新規フォルダを作成します。
- 空の「Media」フォルダ内を右クリックし、[Media] の [Stream Media Source] を選択し、名前を 「MediaStream」 にします。
-
[MediaStream] を開き、好きな Stream URL を入力します。
リンクする URL ファイルがない場合、この サンプルビデオ を右クリックして、アドレスをコピーし Stream URL 入力フィールドにペーストします。
ビデオをプレイするには Stream URL をサポートしているフォーマットへ直接リンクしなければなりません。 例えば、WmfMedia (Windows) は他のストリーム ソースに数多く対応していますが、PS4Media (PS4) のサポートはエンジンの最新版では HLS による MP4 のみです。 プラットフォーム / プレイヤー プラグイン別サポート形式の詳細は「メディア フレームワークのテクニカル リファレンス」ページをご覧ください。
-
「Media」フォルダ内をクリックして [Media] から [Media Player] アセットを選択します。
-
[Create Media Player] ウィンドウで [Video output Media Texture asset] オプションを有効にして [OK] ボタンをクリックします。
すると、この Media Player アセットにリンクしている、再生すべき Media Texture アセットが自動作成されます。
-
作成された Media Texture アセットに自動適用された Media Player アセットの名前を「MyPlayer」にします。
Electra Media Player を使用する場合は、新しく作成された Media Texture アセットをエディタで開きます。詳細パネルで以下を行います。
- [Enable new style output (新しい形式出力を有効にする)] を有効にします。
- [Output format (new style)] を Default (sRGB) に設定します。
2. メディア ソースをマテリアルと関連づける
-
「Media」フォルダの中で、新しい マテリアル を作成し「MyPlayer_Material」と名前を付けます。
-
「MyPlayer_Material」を開いて [Material Domain] を User Interface に変更します。これにより、ユーザー インターフェース出力を持つように Result ノードが変更されます。
-
MyPlayer_Video をクリックしてコンテンツ ブラウザから MyPlayer_Material へドラッグします、MyPlayer_Video をもつ Texture Sample がソースとして作成されます。
-
RGB ピンをマテリアルの Final Color 入力につなぎます。
テクスチャ サンプルまたはテクスチャ オブジェクトを Electra Media Player で使用する場合は、[Sampler Type] を [Color] に設定する必要があります。
3. メディア ソースをユーザー インターフェース ウィジェットに追加します。
-
「Media」フォルダをを右クリックし、[User Interface] の [Widget Blueprint] を選択し、名前を 「HUD」 にします。
[Widget Blueprint] は、Unreal Engine 4 内に UI エレメントを作成するために UMG UI デザイナ と一緒に使用されるアセットです。
-
HUD ウィジェット ブループリント内の [Palette] ウィンドウから 画像 をグラフにドラッグし、伸縮させてグリッのアスペクト比に合わせます。
この画像に Media Texture を適用します。ゲームをプレイ (全画面をプレイするビデオを作成) すると画像はプレイヤーのビューポートに最大表示されます。
-
その 画像 の [Details] パネルにある [Appearance] で、[Brush] を展開し [Image] を [MyPlayer_Material] に設定します。
-
その 画像 の [Details] パネルにある [Slot] で、Anchors ドロップダウンをクリックして、表示されているアンカーの中央のオプションを選択します。
すると、画像はビューポート サイズに関係なく、ビューポートの中央に固定されます。
4. メディア ソースを再生します。
-
HUD ウィジェット ブループリントを閉じて、レベル エディタのツールバーから [Blueprints] と [Open Level Blueprint] を選択します。
-
Media Player Reference 型の MediaPlayer という Variable を作成し、[Default Value] を MyPlayer Media Player アセットに設定します。
[MediaPlayer] 変数のデフォルト値を確認するには、**[Compile] をクリックする必要があります。
-
Ctrl を押しながら MediaPlayer 変数をグラフへドラッグしてこの変数の Get ノードを作成したら、右クリックして Event Begin Play ノードを追加します。
ゲームが開始したら、HUD の作成および表示プロセスを一通り確認し、ストリーム用サウンドの設定し、プレイするためにストリームを開きます。
-
右クリックして Create Widget ノードを追加し、HUD を クラス として設定し、Return Value から Add to Viewport を使用して以下のように接続します。
-
Add to Viewport ノードに続いて、右クリックして Add Media Sound Component を使い、[Details] パネルで [Media Player] を [MyPlayer] に設定します。
ビデオに合わせてオーディオを聴くためには、Media Player アセットに指定した Media Sound Component を使用する必要があります。 ここではそれがランタイム時に動的に作成および追加されます。ただし、Components パネルからこのコンポーネントをレベルに存在するアクタに追加したり、ブループリントの一部として追加することもできます。
- Add Media Sound Component ノードに続いて Media Player 参照ノードから Open Source を使って Media Source を MediaStream アセットに設定します。
クリックしてフルサイズで表示
ノード ネットワークが完成すると、ゲーム開始時に HUD が作成および表示され、プレイ用に開いておいた Media Stream と一緒にサウンドがプレイされます。
-
Level ブループリントを閉じて、[Play] ボタンをクリックしてレベルでプレイします。
最終結果
エディタでプレイした後、ビデオは HUD ウィジェット ブループリントの一部として再び全画面でプレイを開始します。
ディスクからビデオ ファイルをプレイする ファイル メディア ソース と同じ要領で、関連づいた Media Player アセットの Play on Open がデフォルトでオンに設定されていれば、Stream Media Sources は Open Source が呼び出されると自動的にプレイします。 一時停止、巻き戻り、ビデオの停止など Media Player アセットに発行できるコマンドは他にもあります。プレイが開始されると Media Player Reference を引き出す時に、Media Player セクションに表示されます。