Language:
Page Info
Skill Level:
Engine Version:

ビデオ ストリームをプレイする

Stream Media Source はアンリアル エンジン 4 (UE4) 内で サポートされた URL 形式のビデオをストリーミングできるようにするアセットです。 ストリームを定義すると、Media Player アセットを使って UE4 内でのロードおよびプレイが可能となり、(関連づいている Media Texture を使って) レベルの各種特性への割り当てが可能になります。 ストリームは、UI エレメントの一部としてのロードおよびプレイはもちろん、全画面でのプレイ、スタティックメッシュ (TV などの) への適用、レベル内でのプレイさえも可能にします。

本操作ガイドでは、Unreal Motion Graphics (UMG) を使って、ストリーミングされたビデオを全画面でプレイする UI エレメントを作成します。

StreamSourceHero.png

ステップ

ここでは Starter Content Enabled (スターター コンテンツを有効にした状態)Blueprint Third Person Template プロジェクトを使います。

  1. [コンテンツ ブラウザ][Sources Panel] を展開、「Content」 フォルダ内に 「Media」 という名前で新規フォルダを作成します。

    StreamMedia_01.png

  2. 空の「Media」フォルダ内を右クリックし、[Media][Stream Media Source] を選択し、名前を 「MediaStream」 にします。

    StreamMedia_02.png

  3. [MediaStream] を開き、好きな Stream URL を入力します。

    StreamMedia_03.png

    リンクする URL ファイルがない場合、この サンプルビデオ を 右クリック して、アドレスをコピーし Stream URL 入力フィールドにペーストします。

    ビデオを再生するには Stream URL をサポートしているフォーマットへ直接リンクしなければなりません。 例えば、WmfMedia (Windows) は他のストリーム ソースに数多く対応していますが、PS4Media (PS4) のサポートはエンジンの最新版では HLS による MP4 のみです。 プラットフォーム / プレイヤー プラグイン別サポート形式の詳細は、メディア フレームワークの技術リファレンス ページをご覧ください。

  4. 「Media」フォルダ内をクリックして [Media] から [Media Player] アセットを選択します。

    StreamMedia_04.png

  5. [Create Media Player] ウィンドウで [Video output Media Texture asset] オプションを有効にして [OK] ボタンをクリックします。

    StreamMedia_05.png

    すると、この Media Player アセットにリンクしている、再生すべき Media Texture アセットが自動作成されます。

  6. 作成された Media Texture アセットに自動適用された Media Player アセットの名前を 「MyPlayer」 にします。

    StreamMedia_06.png

  7. 「Media」フォルダをを右クリックし、[User Interface][Widget Blueprint] を選択し、名前を 「HUD」 にします。

    StreamMedia_07.png

    [Widget Blueprint] は、アンリアル エンジン 4 内に UI エレメントを作成するために UMG UI デザイナ と一緒に使用されるアセットです。

  8. HUD ウィジェット ブループリント内の [Palette] ウィンドウから 画像 をグラフにドラッグし、伸縮させてグリッのアスペクト比に合わせます。

    StreamMedia_08.png

    この画像に Media Texture を適用します。ゲームをプレイ (全画面をプレイするビデオを作成) すると画像はプレイヤーのビューポートに最大表示されます。

  9. その 画像[Details] パネルにある [Appearance] で、[Brush] を展開し [Image][MyPlayer_Video] に設定します。

    StreamMedia_09.png

  10. その 画像[Details] パネルにある [Slot] で、Anchors ドロップダウンをクリックして、表示されているアンカーの中央のオプションを選択します。

    StreamMedia_08b.png

    すると、画像はビューポート サイズに関係なく、ビューポートの中央に固定されます。

  11. HUD ウィジェット ブループリントを閉じて、レベル エディタのツールバーから [Blueprints] そして [Open Level Blueprint] を選択します。

    StreamMedia_10.png

  12. Media Player Reference 型の MediaPlayer という Variable を作成し、[Default Value]「MyPlayer」 Media Player アセットに設定します。

    StreamMedia_11.png

    [MediaPlayer] 変数のデフォルト値を確認するには、**[Compile] をクリックする必要があります。

  13. Ctrl を押しながら MediaPlayer 変数をグラフへドラッグしてこの変数の Get ノードを作成したら、右クリックして Event Begin Play ノードを追加します。

    StreamMedia_12.png

    ゲームが開始したら、**HUD**の作成および表示プロセスを一通り確認し、ストリーム用サウンドの設定し、プレイするためにストリームを開きます。

  14. 右クリックして Create Widget ノードを追加し、HUDクラス として設定し、Return Value から Add to Viewport を使用して以下のように接続します。

    StreamMedia_13.png

  15. Add to Viewport ノードに続いて、右クリックして Add Media Sound Component を使い、[Details] パネルで [Media Player][MyPlayer] に設定します。

    StreamMedia_14.png

    ビデオを一緒にオーディオを聴くためには、Media Player アセットに指定した Media Sound Component を使用する必要があります。 ここではそれがランタイム時に動的に作成および追加されます。ただし、Components パネルからこのコンポーネントをレベルに存在するアクタに追加したり、ブループリントの一部として追加することもできます。

  16. Add Media Sound Component ノードに続いて Media Player 参照ノードから Open Source を使って Media SourceMediaStream アセットに設定します。

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

    ノード ネットワークが完成すると、ゲーム開始時に HUD が作成および表示され、プレイ用に開いておいた Media Stream と一緒にサウンドがプレイされます。

  17. Level ブループリントを閉じて、[Play] ボタンをクリックしてレベルで再生します。

最終結果

エディタでプレイした後、ビデオは HUD ウィジェット ブループリントの一部として再び全画面で再生を開始します。

ディスクからビデオ ファイルをプレイする ファイル メディア ソース と同じ要領で、関連づいた Media Player アセットの Play on Open がデフォルトでオンに設定されていれば、Stream Media Sources は Open Source が呼び出されると自動的にプレイします。 一時停止、巻き戻り、ビデオの停止など Media Player アセットに発行できるコマンドは他にもあります。プレイが開始されると Media Player Reference を引き出す時に、Media Player セクションに表示されます。