1. Three methods of testing pixel stream, the premise is to be familiar with the process of official website pixel stream delivery, here is just how to test without packaging
1. The first method is to install the unrealvs extension for vs, because after installing this extension, you can add command line parameters to start the project https://docs.unrealengine.com/4.26/zh-CN/ProductionPipelines/DevelopmentSetup/VisualStudioSetup/UnrealVS/installation After finishing, add the following parameters in the command line parameter box -AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888 -game, remember to add a space before -AudioMixer, start the signaling server and start the project to debug
2. The second method is the simplest and most commonly used, that is, you can debug the game directly by running the game in standalone mode in editor mode. First, click on AdvancedSettings and enter the startup parameters -AudioMixer -PixelStreamingIP=localhost - PixelStreamingPort=8888, then start the signaling server and run in standalone mode to debug
3. The third method is just to follow the official website process, so I won’t talk about it here, that is, to test the pixel flow after packaging
https://docs.unrealengine.com/4.26/zh-CN/SharingAndReleasing/PixelStreaming/PixelStreamingIntro/
2. Some tips for using the webpage in the official pixel stream plug-in. Friendly reminder, you don’t need to restart the signaling server and restart the project after modifying the webpage code each time. Just press ctrl+s to save it, and then refresh the webpage.
1. Hide the button in the upper right corner of the webpage
Find the player.css file under the pixel stream file to modify, open the player.css file, ctrl+f search for .overlay, and add a line display: none;
2. Hide the Click to start button, and automatically load the page when opening or refreshing the page
open app.js
Add webRtcPlayerObj.video.muted = true in the setupWebRtcPlayer function
3. Remove the black borders on the webpage. If there are black borders, the resolution may not match, so it must be filled automatically
Open the previously modified player.css file, search for video, add object-fit: fill;
3. Some web page debugging skills
1. Open the debug page, f12 or right click → check
2. View the area corresponding to the element in the web page, click the element page, and then hover the mouse over the code to know the area corresponding to the element. For example, I want to hide the button in the upper right corner of the web page but I don’t know that Where is the block code, see the picture below
In this way, the corresponding class or element is found, and then the style is modified in the css file
3. Break point and view call stack. Click the source code column, find the code you want to debug, and then press the break point with the left mouse button before the line number. I will take app.js as an example
After setting the breakpoint, refresh the webpage and you will come to the breakpoint, and then look at the call stack to see how the function sequence is executed
In the end, refresh the webpage at the break point of the new function, and figure out step by step the execution order of webpages in pixel streaming
