UE4.27 UE5 像素流送新人向教程，手把手帶你避坑

慧聰師太

近期因?yàn)橐幚硐袼亓魉拖嚓P(guān)工作，所以整理了一下UE4.27像素流送的流程，本教程雖然使用UE4.27版本，按理說(shuō)UE5應(yīng)該暫時(shí)也沒(méi)有什么使用方式上的變化。
再就是因?yàn)楣揪W(wǎng)絡(luò)限制，所以我只記錄了3個(gè)應(yīng)用場(chǎng)景：

• 單實(shí)例本地像素流送
  
• 單實(shí)例局域網(wǎng)像素流送
  
• 多實(shí)例局域網(wǎng)自動(dòng)分配像素流送
  

如果了解這幾個(gè)場(chǎng)景的工作原理，配置公網(wǎng)多實(shí)例場(chǎng)景應(yīng)該很輕松，無(wú)非就是開(kāi)通特定端口與配置公網(wǎng)IP，有其他大佬教程，可以參考食用，因?yàn)槲覜](méi)有實(shí)踐，所以此文不做過(guò)多贅述，這篇文章主要是想手把手教你理解像素流送如何配置與應(yīng)用，更全面更理論性的像素流送可以參考大佬文章。
當(dāng)然也不要忘記還有官方文檔可以參考
準(zhǔn)備工作：
打開(kāi)UE4引擎，找到插件菜單。

登錄/注冊(cè)后可看大圖

搜索Pixel Streaming像素流送，啟用插件，然后重啟引擎

登錄/注冊(cè)后可看大圖

打開(kāi)項(xiàng)目設(shè)定

登錄/注冊(cè)后可看大圖

找到Input -> Always Show Touch Interface（一直顯示觸控界面），如果你打算使用手機(jī)來(lái)流送畫(huà)面，建議開(kāi)啟。

登錄/注冊(cè)后可看大圖

找到編輯器偏好

登錄/注冊(cè)后可看大圖

找到Play -> Play in Standalone Game -> Additional Launch Parameters
在里面加入下面后綴
-Audiomixer -PixelStreamingIP=localhost -PixelStreamingPort=7777

登錄/注冊(cè)后可看大圖

*稍微解釋一下這里：
當(dāng)我們點(diǎn)擊Play選項(xiàng)中的Standalone Game的時(shí)候，其實(shí)就是在編輯器之外的獨(dú)立版本啟動(dòng)游戲，所以點(diǎn)擊后你能看見(jiàn)類似打包游戲一樣的界面，執(zhí)行完畢后他才會(huì)開(kāi)始運(yùn)行獨(dú)立的游戲。

登錄/注冊(cè)后可看大圖

而我們?cè)谶@里填寫(xiě)的后綴其實(shí)就是和在Windows資源管理器下給快捷方式加后綴一樣的操作，只是因?yàn)樗麤](méi)有快捷方式讓我們看見(jiàn)，所以要在這里添加后綴。

登錄/注冊(cè)后可看大圖

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

• 單實(shí)例本地像素流送（本地網(wǎng)頁(yè)控制UE程序）
  

1.打包文件：
首先隨便擺個(gè)場(chǎng)景

登錄/注冊(cè)后可看大圖

然后直接打包

登錄/注冊(cè)后可看大圖

然后我們找到剛剛打包好的文件，給執(zhí)行文件創(chuàng)建一個(gè)快捷方式

登錄/注冊(cè)后可看大圖

然后右鍵屬性，給其添加后綴命令
-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=7777


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

登錄/注冊(cè)后可看大圖

如果是初次執(zhí)行他會(huì)進(jìn)行必要的環(huán)境安裝

登錄/注冊(cè)后可看大圖

安裝好就會(huì)開(kāi)始運(yùn)行，直到出現(xiàn)下面的綠字，就算是信令服務(wù)器啟動(dòng)成功了。

登錄/注冊(cè)后可看大圖

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

登錄/注冊(cè)后可看大圖

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

登錄/注冊(cè)后可看大圖

登錄/注冊(cè)后可看大圖

回歸正題。

登錄/注冊(cè)后可看大圖

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

登錄/注冊(cè)后可看大圖

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

登錄/注冊(cè)后可看大圖

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

登錄/注冊(cè)后可看大圖

之后我們?cè)诒緳C(jī)瀏覽器（我用的是edge）輸入我們自己配置好的IP與端口

登錄/注冊(cè)后可看大圖

點(diǎn)擊Start即可開(kāi)始像素流送了

登錄/注冊(cè)后可看大圖

登錄/注冊(cè)后可看大圖

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

登錄/注冊(cè)后可看大圖

別忘記快捷方式這里也要進(jìn)行相同修改，不然像素流送會(huì)失敗

登錄/注冊(cè)后可看大圖

保存之后運(yùn)行程序與信令服務(wù)器。

登錄/注冊(cè)后可看大圖

在網(wǎng)頁(yè)輸入你的PublicIP+端口網(wǎng)頁(yè)即可鏈接，在局域網(wǎng)內(nèi)的手機(jī)輸入相同地址，手機(jī)也可以鏈接，如下圖。

登錄/注冊(cè)后可看大圖

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

登錄/注冊(cè)后可看大圖

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

登錄/注冊(cè)后可看大圖

UseMatchmaker把false改成true，Matchmaker就開(kāi)啟了；
MatchmakerAddress 因?yàn)槭潜镜鼐钟蚓W(wǎng)多實(shí)例，所以填本機(jī)的IPv4地址就好，也是稍后要訪問(wèn)的地址
MatchmakerPort 這個(gè)端口要和Matchmaker文件中的端口對(duì)應(yīng)，下面步驟會(huì)提到
PublicIp 這里可以先寫(xiě)成localhost，不過(guò)后續(xù)建議和MatchmakerAddress一致吧。
HttpPort 此處不要和另外一個(gè)像素流送程序的端口重復(fù)，也不要和Matchmaker的端口重復(fù)。
StreamerPort 同上，都不要和另外的端口重復(fù)，必須是唯一的
這是第一個(gè)像素流送要用到的信令服務(wù)器配置，第二個(gè)其實(shí)大同小異我們要注意的是

登錄/注冊(cè)后可看大圖

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

登錄/注冊(cè)后可看大圖

比如本教程中就是
實(shí)例一快捷方式：
-PixelStreamingIP=localhost -PixelStreamingPort=7777
實(shí)例二快捷方式：
-PixelStreamingIP=localhost -PixelStreamingPort=9999
3.配置Matchmaker配置文件。
因?yàn)槎鄠€(gè)信令服務(wù)器只需要用一個(gè)Matchmaker，所以只需要配置一個(gè)即可。
路徑如下
打包文件夾\Samples\PixelStreaming\WebServers\Matchmaker
找到config.json文件打開(kāi)

登錄/注冊(cè)后可看大圖

文件里內(nèi)容很簡(jiǎn)單，主要修改的就是HttpPort和MatchmakePort。

登錄/注冊(cè)后可看大圖

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

登錄/注冊(cè)后可看大圖

之后下面顯示的就是他所監(jiān)聽(tīng)的端口

登錄/注冊(cè)后可看大圖

然后依次運(yùn)行兩個(gè)信令服務(wù)器，信令服務(wù)器們會(huì)顯示連接到了Matchmaker。

登錄/注冊(cè)后可看大圖

Matchmaker也會(huì)顯示連接信令服務(wù)器。

登錄/注冊(cè)后可看大圖

此時(shí)打開(kāi)兩個(gè)像素流送程序即可，Matchmaker也會(huì)顯示有兩個(gè)端口已經(jīng)準(zhǔn)備好自動(dòng)分配

登錄/注冊(cè)后可看大圖

此時(shí)訪問(wèn)地址xxx.x.x.x:60即可

登錄/注冊(cè)后可看大圖

*訪問(wèn)60端口是因?yàn)槲覀兊膍atchmaker所在端口是60，當(dāng)連接后，他會(huì)自動(dòng)為我們分配到正在進(jìn)行像素流送的70和90端口。
總結(jié)一下就是打開(kāi)matchmaker x1，像素流送程序 x2，配對(duì)的信令服務(wù)器 x2。

登錄/注冊(cè)后可看大圖

最終效果就是這，很壯觀。。。如果你要開(kāi)3個(gè)4個(gè)5個(gè)更多的像素流送，就要開(kāi)更多的程序與信令服務(wù)器。
*這里說(shuō)下N卡有個(gè)限制，最多我們只能開(kāi)3個(gè)像素流送，但是有辦法開(kāi)更多，方法大佬已經(jīng)找到了。
至此，局域網(wǎng)內(nèi)的像素流送就完成了，還是因?yàn)楣揪W(wǎng)絡(luò)問(wèn)題，我沒(méi)有配置公網(wǎng)，各位可以參考其他大佬的文章，本文如果理解了，公網(wǎng)或者云服務(wù)器端還是好配置的。
這里說(shuō)一些注意事項(xiàng)

• 解釋一下像素流送程序快捷方式的后綴命令
  -AudioMixer 像素流送默認(rèn)是沒(méi)有聲音的，所以想要有聲音，這個(gè)必須記得添加
  -PixelStreamingIP=xxxx 像素流送的IP地址，這個(gè)可以根據(jù)需要修改
  -PixelStreamingPort=xxxx 像素流送端口，同理也是可以修改的
  -forceres強(qiáng)制運(yùn)行，后面長(zhǎng)接分辨率指令
  -ResX=1920 -ResY=1080 設(shè)定分辨率 不用多說(shuō)
  -RenderOffScreen 如果不想打開(kāi)像素流送窗口也想讓程序流送，就使用這個(gè)命令，關(guān)閉時(shí)候可以在任務(wù)管理器中結(jié)束程序
  
• 4.27的stun/turn相關(guān)協(xié)議文件路徑
  4.27其實(shí)是沒(méi)有stun/turn文件的，需要打包一個(gè)已經(jīng)開(kāi)啟像素流送插件的4.26空項(xiàng)目，然后找到release文件夾，復(fù)制這個(gè)文件夾過(guò)來(lái)用，這個(gè)方法是可行的。
  
• 使用stun/turn的時(shí)候記得要開(kāi)啟19302 19303兩個(gè)端口
  開(kāi)啟方法百度一大把。
  
• 為了方便開(kāi)啟一大堆程序，可以寫(xiě)一個(gè).bat文件來(lái)執(zhí)行
  

如果之后再遇到什么坑，我還會(huì)來(lái)更新，也希望各位大佬多多交流，共同進(jìn)步！
最后，希望各位開(kāi)發(fā)順利！多拿Money！

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