Streaming Video in Unreal Engine 4 — Part 1
Fortnite recently held a live event where episodes of Punk’d were played on-screen at Risky Reels. I am always intrigued by live in-game events, and wanted to learn a little more about how an event like this actually works.
In Part 1 of this tutorial, I will walk you through how to stream video within a scene in Unreal Engine 4. I will also cover sound attenuation to make your in-game video stream a little more realistic.
https://docs.unrealengine.com/en-US/Engine/MediaFramework/HowTo/StreamMediaSource/index.html
The video used in this tutorial is a demo video provided by Epic Games. The link to that video is here: https://docs.unrealengine.com/Attachments/Engine/MediaFramework/HowTo/StreamMediaSource/Infiltrator%20Demo.mp4
Now let’s begin!
Setting Up The Scene (Optional)
For this tutorial, I am going to be using the Third Person template provided by the engine. Before we get into how to set up video streaming, I would like to make this fun and create an extremely simplified version of Risky Reels. To create your very own Risky Reels, drag three Cube static mesh actors into the scene. I scaled my screen mesh to X: 2.0, Y: 50.0, and Z: 30.0. This makes a fairly large object within the scene that can be viewed from a far distance. I also added beams to hold the screen up. I scaled the two cube mesh to X: 1.0, Y: 1.0, and Z: 4.5.
And just for fun, I applied the M_Metal_Burnished_Steel material to my screen and the M_Wood_Walnut material to the beams.
Time to set up the video stream!
Creating The Video Stream
I am going to create a new folder in my Assets folder called Media. To do this, right click on the Assets folder and click New Folder. Name this new folder Media. This is where we will create all of the components related to the video stream. Now, right click on the Media folder you just created and click New Asset -> Media -> Stream Media Source. This will create a Stream Media Source object where we will specify the URL of the video that will be streamed. I am going to call this media source UnrealMediaSource, but you can name it whatever you like.
After the Stream Media Source asset has been created, double click it to edit its properties. The property we care about is Stream Url field. Paste the link I provided at the beginning of this tutorial into the Stream Url field and click Save.
Now right click on the Media folder again and click New Asset -> Media -> Media Player. This will create a new Media Player asset that will display the video within the game scene.
A Create Media Player pop-up will appear. Click Video output MediaTexture asset. Selecting this check box tells the engine to create a new MediaTexture that the video will be rendered on.
After the Media Source has been created, double click on it and then select the Stream Media Source we created earlier. The video should start playing and look similar to the screen shot below.
Now that we know the video stream is working, it is time to add it to our scene.
Playing The Stream Within The Scene
To add the video stream to our scene, we must first create a static mesh where we can apply the Media Player texture. Because we are creating a screen, we can use a Plane mesh.
Drag the Plane mesh into the scene and adjust the rotation and scale so that it fits onto the screen we created earlier. I have set the Plane’s rotation to X: 90.0, Y: 0.0, and Z: 90.0. I have also scaled the Plane to X: 49.0, Y: 29.0, and Z: 1.0. This will make the Plane big enough to fit the entire screen mesh without going over the sides. Now drag the mesh to line up in front of the screen. After the Plane mesh is lined up, drag the Media Player texture onto the Plane mesh. This will apply the media texture to the mesh. Your scene should look like the screen shot below.
After the media texture has been applied, it is time to create a simple Blueprint to start the video stream when the game begins. To open the level Blueprint, click Blueprints -> Open Level Blueprint.
Now create a new variable called MediaPlayer. We will change this variable’s type to a Media Player Object Reference by searching for Media Player under Variable Types and selecting Object Reference from the Media Player Object Type. You will now see that your variable has changed to a Media Player Object Reference.
Drag your MediaPlayer variable into the Event Graph and select Get MediaPlayer. This will allow us to select the Media Player we created earlier in the tutorial.
Click on the MediaPlayer variable and click on the Media Player drop-down and select the Media Player that you created.
Now right click on the Event Graph and search for BeginPlay. Select Event BeginPlay and add to the Event Graph. Right click again and search for Add Media Sound Component. Select the Add Media Sound Component node and create a connection from Event BeginPlay to the Add Media Sound Component node. You will also need to select the Media Player we created so that the video stream’s audio will play when the video plays.
Now create a connection from the Media Player variable and search for Open Source. Select Open Source and create a connection from the Add Media Sound Component node to the Open Source node. Click Open Source and select the Media Source drop-down. Select the Stream Media Source asset created earlier. Now compile and save the blueprint.
Now it is time to test. Click play and the video should begin playing on the screen within the scene. You should also hear the audio as well.
Congratulations! We have a working video stream within our game. Now let’s add some sound attenuation to make the scene a little more realistic so that the audio fades out as we move away from the screen and fade in as we move toward to the screen.
Adding Sound Attenuation
Attenuation — the reduction of the force, effect, or value of something.
https://docs.unrealengine.com/en-US/Engine/Audio/DistanceModelAttenuation/index.html
To add sound attenuation, open up the level Blueprint and select the Add Media Sound Component node.
Scroll down until you see the Attenuation settings. Click on the drop-down and select Sound Attenuation under Create New Asset. You will be prompted to select a folder to place the Sound Attenuation asset into. Place this asset into the Media folder. Make sure the Allow Spatialization check box is clicked as well. We need to compile the Blueprint because we updated the Add Media Sound Component node. We have now created a Sound Attenuation asset that will be used to configure sound attenuation within our scene.
To edit Sound Attenuation within the scene, double click the Sound Attenuation asset we just created. Under Attenuation Distance, change the Attenuation function to Natural Sound. This will create an effect that sounds fairly realistic as our character moves toward and away from the audio source.
Because this is a fairly large screen, I decided to set the Inner Radius to 5000.0 and Falloff Distance to 10,000.0. This gives the effect that there are large speakers playing the audio and that it can be heard from a relatively large distance.
Conclusion
And that is all for Part 1 of this tutorial. In Part 2, I will cover replication of the video stream. This will allow multiple clients to connect to a dedicated server in AWS and see the video stream in real-time. Until then, thanks for reading!
