# Utilizing Media Framework Tools

It is possible to utilize Unreal Engine 5.1 Media Framework tools for various tasks, such as **playing a video file** inside your Level through RealityHub.&#x20;

### Before You Begin

{% embed url="<https://docs.unrealengine.com/5.1/en-US/play-a-video-file-in-unreal-engine/>" %}
Unreal Engine Documentation Link
{% endembed %}

* Check out the Unreal Engine 5.1 Documentation Page using the link above and get your scene ready accordingly.

<div align="left"><figure><img src="https://content.gitbook.com/content/RazR6THh3EAtvpLMGCP1/blobs/lHoyTTY6Br9FiXpsO31Z/image.png" alt=""><figcaption><p>Example Media Framework Tools in Content Browser</p></figcaption></figure></div>

To use Media Framework tools with a basic pipeline, your Level needs to have the content outlined in the picture above:

* Media File Source
* Material
* Media Player
* Media Texture
* Remote Control Preset

### Creating Blueprint

<div align="left"><figure><img src="https://content.gitbook.com/content/RazR6THh3EAtvpLMGCP1/blobs/vqVVT4ct0j44aakYBzTw/image.png" alt=""><figcaption><p>Asset Creation Menu</p></figcaption></figure></div>

* Right-click on the **Content Browser** and select the **Blueprint Class**

<div align="left"><figure><img src="https://content.gitbook.com/content/RazR6THh3EAtvpLMGCP1/blobs/JY3SS2p7i2OmMdi6p0ar/image.png" alt=""><figcaption><p>Pick Parent Class Window</p></figcaption></figure></div>

* Pick the Actor from the "Pick Parent Class" window, and give it a new name for better organization (in this case, we'll call it BP\_Media)
* Drag & drop the blueprint into the Level
* Double-click on the blueprint or right-click on it and select **Edit**

<div align="left"><figure><img src="https://content.gitbook.com/content/RazR6THh3EAtvpLMGCP1/blobs/Shdlb8Mj3N4NjDJyxF69/image.png" alt=""><figcaption><p>Adding Blueprint Component </p></figcaption></figure></div>

* Go to the **Components** section, click on **Add** button, find and select **Cube**

<div align="left"><figure><img src="https://content.gitbook.com/content/RazR6THh3EAtvpLMGCP1/blobs/rDCbPUXp4wD4N5fjzjlT/image.png" alt=""><figcaption><p>Changing Scale</p></figcaption></figure></div>

* Adjust the Scale parameter value of the Cube component as seen in the image above

### Defining Variables

<div align="left"><figure><img src="https://content.gitbook.com/content/RazR6THh3EAtvpLMGCP1/blobs/XWwhwtJ5MuujpKSOCHCe/image.png" alt=""><figcaption><p>Adding Variable</p></figcaption></figure></div>

* Navigate to the **My Blueprint** section and click the **Plus** button to add your first **Variable**. If you want, you can rename it to **MediaPlayer** for better organization of your scene

<div align="left"><figure><img src="https://content.gitbook.com/content/RazR6THh3EAtvpLMGCP1/blobs/1HIm0fyBWJJZ8J27AIac/image.png" alt=""><figcaption><p>Changin Variable Type</p></figcaption></figure></div>

* Change the Variable type to **Media Player** > **Object Reference**, as shown in the image above

<div align="left"><figure><img src="https://content.gitbook.com/content/RazR6THh3EAtvpLMGCP1/blobs/JyUezQFiriHS2ld4CXq7/image.png" alt=""><figcaption><p>Details Panel in Blueprint UI</p></figcaption></figure></div>

* Go to the **Details** panel, select your **MediaPlayer** as a **Default Value**, as illustrated above

<div align="left"><figure><img src="https://content.gitbook.com/content/RazR6THh3EAtvpLMGCP1/blobs/QJrxP8JkAHbv6r17ZYo7/image.png" alt=""><figcaption><p>Adding Variables</p></figcaption></figure></div>

* Add another **Variable**, and change its type to **Media Source** > **Object Reference**
* Rename it as **VideoTexture**, and leave its **Default Value** empty
* Add another **Variable**, change its type to **String**, rename it something like **File Path**, and make it **Instance Editable** by clicking on the **eye icon** as illustrated above

<div align="left"><figure><img src="https://content.gitbook.com/content/RazR6THh3EAtvpLMGCP1/blobs/waYJ7BCDOi27bpfIU5K4/image.png" alt=""><figcaption><p>Node Tree</p></figcaption></figure></div>

* Create the node tree as shown above.&#x20;

### Creating Material

<div align="left"><figure><img src="https://content.gitbook.com/content/RazR6THh3EAtvpLMGCP1/blobs/L33rQYYUilFLsa2YxY3Z/image.png" alt=""><figcaption><p>Matertial Creation</p></figcaption></figure></div>

* Right-click on the Content Browser and select the Material asset, rename it something like M\_Media

<div align="left"><figure><img src="https://content.gitbook.com/content/RazR6THh3EAtvpLMGCP1/blobs/SPJQ7tUW125CJ8kb14hq/image.png" alt=""><figcaption><p>Material Editor</p></figcaption></figure></div>

* Drag & drop your **Media Texture** asset (in our case, it is **my\_MediaPlayer\_Video**) to the **Material Editor**&#x20;
* Connect the RGB output of the **Texture Sample** to the **Base Color** input of the **Material,** and **Save** it as shown above

<div align="left"><figure><img src="https://content.gitbook.com/content/RazR6THh3EAtvpLMGCP1/blobs/bjvas98KL4SOMGiuevHv/image.png" alt=""><figcaption><p>Assigning Material to Blueprint Cube Asset</p></figcaption></figure></div>

* Go to **Outliner** and select your Blueprint
* Select the **Cube** asset in the **Details** panel
* Go to the **Materials** property group and assign the material to the **Element 0** slot

### Preparing Remote Control Preset

* Right-click on the Content Browser
* Go to Remote Control and select the Remote Control Preset (RCP)
* Double-click on the RCP and keep it open

<div align="left"><figure><img src="https://content.gitbook.com/content/RazR6THh3EAtvpLMGCP1/blobs/GdmSwF7AuVjBiZTzuw0Y/image.png" alt=""><figcaption><p>Exposing Property Parameter</p></figcaption></figure></div>

* Go to the **Details** panel, select the Blueprint
* Expose the **File Path** property by clicking on the eye icon, as shown above

<div align="left"><figure><img src="https://content.gitbook.com/content/RazR6THh3EAtvpLMGCP1/blobs/ezp2lNa80dYQZnDhWT2i/image.png" alt=""><figcaption><p>RCP</p></figcaption></figure></div>

* Click on the **Expose Function** button
* Go to **Actor Function** > **Blueprint** > select the **Play Video**&#x20;
* Save the RCP and then drag and drop it into the **Level**

<div align="left"><figure><img src="https://content.gitbook.com/content/RazR6THh3EAtvpLMGCP1/blobs/EaWFzwRswPY3JdILX0fh/image.png" alt=""><figcaption><p>Exposed Parameter and Function to RCP</p></figcaption></figure></div>

Your RCP should look like in the image above.&#x20;

<div align="left"><figure><img src="https://content.gitbook.com/content/RazR6THh3EAtvpLMGCP1/blobs/IGm1ghjLfEcBGy2Td5LX/image.png" alt=""><figcaption><p>RCP Exposed Property Adding Suffix</p></figcaption></figure></div>

* Change the exposed property's name to something like Video for better organizing&#x20;
* Add the following suffix after the exposed property's name: **`_FilePath_AssetPath`** as illustrated above
* Save the RCP, then Go to **File** > **Save All**
* Close the Unreal Editor
* Switch to RealityHub and Launch the Project via [Launcher Module](https://zerodensitydocumentation.gitbook.io/docs/reality-5.3-sp1/reality-5.3-sp1/user-guide/launcher)

<div align="left"><figure><img src="https://content.gitbook.com/content/RazR6THh3EAtvpLMGCP1/blobs/gtHBSOVf3d0NCefDMQsR/image.png" alt=""><figcaption><p>Image 1</p></figcaption></figure></div>

<div align="left"><figure><img src="https://content.gitbook.com/content/RazR6THh3EAtvpLMGCP1/blobs/OmAmX2IWoMo2KJrXahho/image.png" alt=""><figcaption><p>Image 2</p></figcaption></figure></div>

* Image 1 shows the exposed property as a FileInput component inside the RealityHub
* Image 2 shows the exposed Blueprint Function as a button&#x20;

Now you can select a video through [Asset Browser](https://zerodensitydocumentation.gitbook.io/docs/reality-5.3-sp1/reality-5.3-sp1/user-guide/nodegraph-actions/nodegraph/asset-browser), and utilize it through RealityHub modules such as [Actions](https://zerodensitydocumentation.gitbook.io/docs/reality-5.3-sp1/reality-5.3-sp1/user-guide/nodegraph-actions/actions), [Form Builder](https://zerodensitydocumentation.gitbook.io/docs/reality-5.3-sp1/reality-5.3-sp1/user-guide/nodegraph-actions/form-builder), and [Playout](https://zerodensitydocumentation.gitbook.io/docs/reality-5.3-sp1/reality-5.3-sp1/user-guide/playout).&#x20;
