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

インターネットからビデオをストリーミングし、UI エレメント内でプレイする方法を説明します。

Stream Media Source は Unreal Engine 5 (UE5) 内で サポートされた URL 形式のビデオのストリーミングを可能にするアセットです。 ストリームを定義すると、Media Player アセットを使って UE5 内でのロードおよびプレイが可能となり、ストリームを (関連づいている Media Texture を使って) レベルの各種特性へ割り当てることができます。

ストリームは、UI エレメントの一部としてのロードおよびプレイはもちろん、全画面でのプレイ、スタティックメッシュ (TV などの) への適用、レベル内でのプレイさえも可能にします。

このページの操作ガイドでは、

[Unreal Motion Graphics](programming-and-scripting/programming-language-implementation/cpp-in-unreal-engine/tutorials/UMG)
(UMG) を使って、ストリーミングされたビデオを全画面でプレイする UI エレメントを作成します。

この操作ガイドで C++ を使用する必要はありません。

00-hero-stream_ue5.png

推奨設定

スターター コンテンツ この操作ガイドでは、スターターコンテンツを有効にした状態 の 「ブループリントのサードパーソン テンプレート」 プロジェクトを使用しています。

1. ストリーミング メディア ソースとテクスチャを作成する

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

    01-media-folder_ue5.png

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

    02-stream-media-source_ue5.png

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

    03-stream-url_ue5.png

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

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

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

    04-add-media-player_ue5.png

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

    05-video-output-asset_ue5.png

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

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

    06-media-player_ue5.png

    Electra Media Player を使用する場合は、新しく作成された Media Texture アセットをエディタで開きます。詳細パネルで以下を行います。

    • [Enable new style output (新しい形式出力を有効にする)] を有効にします。

    • [Output format (new style)] を Default (sRGB) に設定します。

    07-enable-new-style-output_ue5.png

2. メディア ソースをマテリアルと関連づける

  1. 「Media」フォルダで マテリアル を作成し「MyPlayer_Material」と名前をつけます。

    New material that will be used for the streaming media source

  2. 「MyPlayer_Material」を開いて [Material Domain] を User Interface に変更します。これにより、ユーザー インターフェース出力を持つように Result ノードが変更されます。

    Material domain set to User Interface

  3. MyPlayer_Video をクリックしてコンテンツ ブラウザから MyPlayer_Material へドラッグします、MyPlayer_Video をもつ Texture Sample がソースとして作成されます。

  4. RGB ピンをマテリアルの Final Color 入力につなぎます。

    Final material using streaming media source

    テクスチャ サンプルまたはテクスチャ オブジェクトを Electra Media Player で使用する場合は、[Sampler Type] を [Color] に設定する必要があります。

    10-sampler-type-color_ue5.png

3. メディア ソースをユーザー インターフェース ウィジェットに追加します。

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

    11-widget-blueprint_ue5.png

    [Widget Blueprint] は、Unreal Engine 4 内に UI エレメントを作成するために

    [](programming-and-scripting/programming-language-implementation/cpp-in-unreal-engine/tutorials/UMG)
    と一緒に使用されるアセットです。

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

    12-add-canvas-panel_ue5.png

  3. [Palette] ウィンドウから 画像 を Canvas Panel のグラフにドラッグし、伸縮させてグリッのアスペクト比に合わせます。

    13-add-image-canvas_ue5.png

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

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

    14-image-my-player-material_ue5.png

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

    15-add-anchors_ue5.png

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

4. メディア ソースを再生します。

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

    16-open-level-blueprint_ue5.png

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

    17-variables-media-player_ue5.png

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

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

    18-add-media-player-blueprint_ue5.png

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

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

    19-create-hud-widget_ue5.png

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

    20-add-media-sound-component_ue5.png

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

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

    21-all-blueprint-chain_ue5.png

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

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

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

最終結果

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

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

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