Stream Media Source は Unreal Engine 5 (UE5) 内で サポートされた URL 形式のビデオのストリーミングを可能にするアセットです。 ストリームを定義すると、Media Player アセットを使って UE5 内でのロードおよびプレイが可能となり、ストリームを (関連づいている Media Texture を使って) レベルの各種特性へ割り当てることができます。
ストリームは、UI エレメントの一部としてのロードおよびプレイはもちろん、全画面でのプレイ、スタティックメッシュ (TV などの) への適用、レベル内でのプレイさえも可能にします。
このページの操作ガイドでは、
この操作ガイドで C++ を使用する必要はありません。
推奨設定
スターター コンテンツ この操作ガイドでは、スターターコンテンツを有効にした状態 の 「ブループリントのサードパーソン テンプレート」 プロジェクトを使用しています。
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 エレメントを作成するために
[](programming-and-scripting/programming-language-implementation/cpp-in-unreal-engine/tutorials/UMG)と一緒に使用されるアセットです。HUD ウィジェット ブループリント内の [Palette] ウィンドウから Canvas Panel をグラフにドラッグし、伸縮させてグリッのアスペクト比に合わせます。
[Palette] ウィンドウから 画像 を Canvas Panel のグラフにドラッグし、伸縮させてグリッのアスペクト比に合わせます。
この画像に 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 セクションに表示されます。