愛鋒貝

標題: UE4.27 UE5 像素流送新人向教程，手把手帶你避坑 [打印本頁]
作者: 慧聰師太    時間: 2022-9-21 08:10
標題: UE4.27 UE5 像素流送新人向教程，手把手帶你避坑
近期因為要處理像素流送相關(guān)工作，所以整理了一下UE4.27像素流送的流程，本教程雖然使用UE4.27版本，按理說UE5應(yīng)該暫時也沒有什么使用方式上的變化。
再就是因為公司網(wǎng)絡(luò)限制，所以我只記錄了3個應(yīng)用場景：
如果了解這幾個場景的工作原理，配置公網(wǎng)多實例場景應(yīng)該很輕松，無非就是開通特定端口與配置公網(wǎng)IP，有其他大佬教程，可以參考食用，因為我沒有實踐，所以此文不做過多贅述，這篇文章主要是想手把手教你理解像素流送如何配置與應(yīng)用，更全面更理論性的像素流送可以參考大佬文章。
當然也不要忘記還有官方文檔可以參考
準備工作：
打開UE4引擎，找到插件菜單。

(, 下載次數(shù): 16)
搜索Pixel Streaming像素流送，啟用插件，然后重啟引擎

(, 下載次數(shù): 13)
打開項目設(shè)定

(, 下載次數(shù): 17)
找到Input -> Always Show Touch Interface（一直顯示觸控界面），如果你打算使用手機來流送畫面，建議開啟。

(, 下載次數(shù): 13)
找到編輯器偏好

(, 下載次數(shù): 17)
找到Play -> Play in Standalone Game -> Additional Launch Parameters
在里面加入下面后綴
-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=7777

(, 下載次數(shù): 14)
*稍微解釋一下這里：
當我們點擊Play選項中的Standalone Game的時候，其實就是在編輯器之外的獨立版本啟動游戲，所以點擊后你能看見類似打包游戲一樣的界面，執(zhí)行完畢后他才會開始運行獨立的游戲。

(, 下載次數(shù): 15)
而我們在這里填寫的后綴其實就是和在Windows資源管理器下給快捷方式加后綴一樣的操作，只是因為他沒有快捷方式讓我們看見，所以要在這里添加后綴。

(, 下載次數(shù): 16)
當然如果你不用這個Play Standalone Game選項，每次調(diào)試都選擇直接打包也ok，那這里不填也無所謂，了解原理即可。
**解釋一下這幾個后綴命令：
-AudioMixer 像素流送默認是沒有聲音的，所以想要有聲音，這個必須記得添加
-PixelStreamingIP=localhost 像素流送的IP地址，現(xiàn)在是本地端口，這個后面可以根據(jù)需要修改
-PixelStreamingPort=7777 像素流送端口，同理也是可以修改的
Windows下給快捷方式添加后綴
前置工作結(jié)束
1.打包文件：
首先隨便擺個場景

(, 下載次數(shù): 13)
然后直接打包

(, 下載次數(shù): 17)
然后我們找到剛剛打包好的文件，給執(zhí)行文件創(chuàng)建一個快捷方式

(, 下載次數(shù): 14)
然后右鍵屬性，給其添加后綴命令
-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=7777


之后確認關(guān)閉窗口
2.配置信令服務(wù)器
找到信令服務(wù)器的位置，如果你在前置配置中正確啟用了像素流送插件，打包時他會出現(xiàn)這個文件夾。
位置：
打包目錄下
\Samples\PixelStreaming\WebServers\SignallingWebServer\platform_scripts\cmd\
打開run_local.bat這個文件

(, 下載次數(shù): 16)
如果是初次執(zhí)行他會進行必要的環(huán)境安裝

(, 下載次數(shù): 17)
安裝好就會開始運行，直到出現(xiàn)下面的綠字，就算是信令服務(wù)器啟動成功了。

(, 下載次數(shù): 14)
當然到這里還算結(jié)束，還要對信令服務(wù)器進行配置，所以先關(guān)閉這個窗口。
回到打包目錄下
Samples\PixelStreaming\WebServers\SignallingWebServer\
找到cirrus.js，右鍵 -> 編輯，找到下圖這里，看見密密麻麻的字符先別慌，圈起來的是比較重要的，我一個一個解釋

(, 下載次數(shù): 15)
UseMatchmake
true/false是否使用Matchmaker（多實例自動分配player用的）
MatchmakerAddress
Matchmaker地址 這個地址是我們要訪問的地址配合matchmaker.js中的Matchmaker端口使用
MatchmakerPort
這個要和matchmaker.js中的Matchmaker中設(shè)定的端口一致
PublicIp
公網(wǎng)IP，局域網(wǎng)測試時候可以寫localhost或者127.0.0.1
HttpPort
此像素流送程序使用的端口
StreamPort
此像素流送程序要流送的地址要和像素流送程序快捷方式的后綴命令-PixelStreamingIP一致
*因為UE4.27好像和之前的版本不同，這個版本的config.json文件內(nèi)已經(jīng)將需要用到的可修改項整合在一起了，這里我推薦直接修改cirrus.js文件，因為這里面的const優(yōu)先級高，后面不會因為修改兩個文件而起沖突（可能我的解釋有誤，也希望有大神給我講一下區(qū)別）

(, 下載次數(shù): 15)

(, 下載次數(shù): 15)
回歸正題。

(, 下載次數(shù): 15)
局域網(wǎng)環(huán)境單實例串流我們只需要確認Public IP和StreamerPort修改即可，而這兩個位置的參數(shù)要和程序的快捷方式一致，不然無法串流

(, 下載次數(shù): 14)
全部搞定后，我們運行剛配置好的信令服務(wù)器的run_local.bat，建議直接創(chuàng)建快捷方式到外面，不然每次找太麻煩了，直接運行這兩個文件

(, 下載次數(shù): 11)
如果配置的都正確，綠字會提示Streamer Connected: ::1，這表示像素流送的程序與信令服務(wù)器已經(jīng)鏈接上了

(, 下載次數(shù): 14)
之后我們在本機瀏覽器（我用的是edge）輸入我們自己配置好的IP與端口

(, 下載次數(shù): 14)
點擊Start即可開始像素流送了

(, 下載次數(shù): 15)

(, 下載次數(shù): 14)
右上角的加號可以修改像素流送配置，官方文檔可查閱如何配置，這里不做贅述。
單實例本地像素流送場景算搞定了。
接下來講
二．單實例局域網(wǎng)像素流送（局域網(wǎng)內(nèi)任意設(shè)備控制UE程序）
其原理就是在剛剛配置好的本地流送基礎(chǔ)上修改PublicIP地址，然后局域網(wǎng)內(nèi)設(shè)備訪問這個地址即可控制。
首先我們查一下局域網(wǎng)內(nèi)電腦的IP
直接打開cmd命令提示符，ipconfig回車，就能找到自己IPv4的地址，記住這個地址，
回到cirrus.js，把PublicIP修改為你的地址，同時

(, 下載次數(shù): 13)
別忘記快捷方式這里也要進行相同修改，不然像素流送會失敗

(, 下載次數(shù): 12)
保存之后運行程序與信令服務(wù)器。

(, 下載次數(shù): 14)
在網(wǎng)頁輸入你的PublicIP+端口網(wǎng)頁即可鏈接，在局域網(wǎng)內(nèi)的手機輸入相同地址，手機也可以鏈接，如下圖。

(, 下載次數(shù): 15)
*手機和電腦操控的是同一實例，類似于玩游戲的遠程遙控，或者本地串流的意思。
三.多實例局域網(wǎng)自動分配像素流送（局域網(wǎng)內(nèi)網(wǎng)頁/手機控制不同的獨立程序）
因為多實例我們要用到多個實例（就是至少兩個UE程序），所以我們要復(fù)制一份打包好的文件夾隨便起個名就好

(, 下載次數(shù): 17)
如果上面的單實例配置已經(jīng)明白原理，那么多實例無非就是兩個程序配置
相同的PublicIP +不同的HTTPPort + 不同的streamerPort
然后用Epic官方的Matchmaker自動分配進入的用戶去操控不同的實例。
1.開啟Matchmaker功能 + 配置信令服務(wù)器
開啟Matchmaker，只要去編輯信令服務(wù)器的cirrus.js即可

(, 下載次數(shù): 18)
UseMatchmaker把false改成true，Matchmaker就開啟了；
MatchmakerAddress 因為是本地局域網(wǎng)多實例，所以填本機的IPv4地址就好，也是稍后要訪問的地址
MatchmakerPort 這個端口要和Matchmaker文件中的端口對應(yīng)，下面步驟會提到
PublicIp 這里可以先寫成localhost，不過后續(xù)建議和MatchmakerAddress一致吧。
HttpPort 此處不要和另外一個像素流送程序的端口重復(fù)，也不要和Matchmaker的端口重復(fù)。
StreamerPort 同上，都不要和另外的端口重復(fù)，必須是唯一的
這是第一個像素流送要用到的信令服務(wù)器配置，第二個其實大同小異我們要注意的是

(, 下載次數(shù): 17)
MatchmakerAddress，MatchmakerPort，PublicIp這三項是否與另一個信令服務(wù)器填寫一致？
HttpPort，StreamerPort是否是唯一？
2.配置快捷方式
這里比較容易理解，要注意的是每個快捷方式的
-PixelStreamingIP和-PixelStreamingPort后綴命令
這兩個地址是否和對應(yīng)的信令服務(wù)器地址相同即可

(, 下載次數(shù): 17)
比如本教程中就是
實例一快捷方式：
-PixelStreamingIP=localhost -PixelStreamingPort=7777
實例二快捷方式：
-PixelStreamingIP=localhost -PixelStreamingPort=9999
3.配置Matchmaker配置文件。
因為多個信令服務(wù)器只需要用一個Matchmaker，所以只需要配置一個即可。
路徑如下
打包文件夾\Samples\PixelStreaming\WebServers\Matchmaker
找到config.json文件打開

(, 下載次數(shù): 14)
文件里內(nèi)容很簡單，主要修改的就是HttpPort和MatchmakePort。

(, 下載次數(shù): 14)
*這里解釋下
HttpPort
這是我們使用Matchmaker后要訪問的端口，需要配合cirrus.js中的MatchmakerAddress使用
示例：網(wǎng)頁直接輸入172.x.x.x:80（即MatchmakerIp:MatchMakerPort)即可訪問了
MatchmakerPort
這個端口要和cirrus.js中的MatchmakerPort一致
全部配置好之后，我們運行matchmaker，如果是初次運行會自動安裝必要環(huán)境，不放心也可以先運行setup.bat再run.bat。

(, 下載次數(shù): 12)
之后下面顯示的就是他所監(jiān)聽的端口

(, 下載次數(shù): 15)
然后依次運行兩個信令服務(wù)器，信令服務(wù)器們會顯示連接到了Matchmaker。

(, 下載次數(shù): 17)
Matchmaker也會顯示連接信令服務(wù)器。

(, 下載次數(shù): 16)
此時打開兩個像素流送程序即可，Matchmaker也會顯示有兩個端口已經(jīng)準備好自動分配

(, 下載次數(shù): 16)
此時訪問地址xxx.x.x.x:60即可

(, 下載次數(shù): 15)
*訪問60端口是因為我們的matchmaker所在端口是60，當連接后，他會自動為我們分配到正在進行像素流送的70和90端口。
總結(jié)一下就是打開matchmaker x1，像素流送程序 x2，配對的信令服務(wù)器 x2。

(, 下載次數(shù): 13)
最終效果就是這，很壯觀。。。如果你要開3個4個5個更多的像素流送，就要開更多的程序與信令服務(wù)器。
*這里說下N卡有個限制，最多我們只能開3個像素流送，但是有辦法開更多，方法大佬已經(jīng)找到了。
至此，局域網(wǎng)內(nèi)的像素流送就完成了，還是因為公司網(wǎng)絡(luò)問題，我沒有配置公網(wǎng)，各位可以參考其他大佬的文章，本文如果理解了，公網(wǎng)或者云服務(wù)器端還是好配置的。
這里說一些注意事項
如果之后再遇到什么坑，我還會來更新，也希望各位大佬多多交流，共同進步！
最后，希望各位開發(fā)順利！多拿Money！

-----------------------------



歡迎光臨 愛鋒貝 (http://7gfy2te7.cn/) Powered by Discuz! X3.4