UE像素流通過URL地址傳遞參數解決方案

在使用UE自帶的像素流解決方案時,雖然效果一般,但是還能湊活用,最近在實際項目中,需要通過配對服務器的URL地址傳遞參數,本文以傳遞token為例。

例如:下方地址為配對服務器(Matchmaker)的訪問地,希望通過URL中帶參的方式,將token傳遞給UE

http://192.168.100.78:8081/?token=666

此時需要解決的問題有以下幾個?
1、Matchmaker獲取URL地址中的token參數
2、Matchmaker在重定向到信令服務器(SignallingWebServer)時,將token一起帶過去
3、SignallingWebServer將token傳遞給UE(這部分可以參考UE官網的使用教程像素流送

下面我重點說一下問題1和問題2的解決方案,Matchmaker服務和SignallingWebServer服務都是使用node來實現的,所以公司如果有使用node開發棧的同事,處理起來會比較簡單,如果沒有的話,可以參考我下方的解決方案。

問題一:

找到matchmaker.js文件,這里就是matchmaker和核心邏輯。


image.png

找到下圖代碼處,此處內容是Matchmaker重定向到信令服務器的路由地址。


image.png

將此處代碼修改為下圖所示,這樣重定向的路由地址中會攜帶token參數,這樣第一個問題就解決了。


image.png
${req.query.token} //此部分代碼含義為:獲取URL地址上的token參數
res.redirect(`http://${cirrusServer.address}:${cirrusServer.port}?token=${req.query.token}`);

問題二:

問題一解決后,會發現token會被重定向到信令服務器的路由地址上,如圖所示


image.png

這時候,找到信令服務的player.html文件。


image.png

打開player.html,在<head></head>標簽中增加截取url中token的代碼


image.png

實際項目中,有可能遇到由于UE程序啟動時機問題,造成的UE沒有正常收到player.html發送過來的token。所以增加了每500毫秒發送一次,UE成功接收到token后,會給player.html發送一條接收成功的指令。

同時UE側也需要在EventBeginPlay后,定時給player.html發送請求token的指令。

<script>
        //獲取url地址中的token參數
        function GetQueryString(name) {
            var reg = new RegExp("(^|&amp;)" + name + "=([^&amp;]*)(&amp;|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            var context = "";
            if (r != null)
                context = decodeURIComponent(r[2]);
            reg = null;
            r = null;
            return context == null || context == "" || context == "undefined" ? "" : context;
        }

        console.log("信令服務器收到token:" + GetQueryString("token"));
        
        //ue成功收到token
        let token_success = false;

        function myHandleResponseFunction(data) {
            //獲取token
            if (data === "get_token") {
                //信令服務輪詢給UE發送token
                let token = {token: GetQueryString("token")};
                let timer = setInterval(() =&gt; {
                    if (!token_success) {
                        console.log("信令服務器嘗試發送token給ue:" + GetQueryString("token"));
                        emitUIInteraction(token);
                    } else {
                        console.log("信令服務器停止發送token給ue");
                        clearInterval(timer);
                        timer = null;
                    }
                }, 500);
                //ue成功收到token
            } else if (data === "token_success") {
                console.log("ue成功收到token");
                token_success = true;
            }
        }

        //監聽UE發送過來的消息
        addResponseEventListener("handle_responses", myHandleResponseFunction);
</script>

注意:除了通過player.html來和UE通信,直接修改信令服務的源碼,通過監聽和UE的連接狀態來傳遞token也是可以的,可惜本人非前端出身,沒有再往下去研究,有大佬通過這種方式解決了可以留個言撒。

UE像素流使用教程可以參考B站上的一位大佬,寫的非常詳細
UE4像素流送

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容