UE4 PixelStreamingDemo verification

The official cases of 4.24 and 4.27 can be run directly by following the tutorial, but there will be various problems in 4.26 and it will not be able to run through.

I searched for some information, and finally got through, and recorded the process of 4.26.

Two to watch:

https://docs.unrealengine.com/4.27/en-US/SharingAndReleasing/PixelStreaming/PixelStreamingIntro/ https://docs.unrealengine.com/4.27/en-US/SharingAndReleasing/PixelStreaming/PixelStreamingIntro/ https://docs. unrealengine.com/4.27/en-US/Resources/Showcases/PixelStreamingShowcase/ https://docs.unrealengine.com/4.27/en-US/Resources/Showcases/PixelStreamingShowcase/ PixelStreamingDemo can be downloaded directly from UE4 Market.

When running, it will report an error, solve the address:

Crash problem of UE4.23/4.26 pixel streaming plugin PixelStreaming using Chrome .cpp] [Line:173] player 101 not found Error message 2: The signaling server page displays: player 102 con… https://zhuanlan.zhihu.com/p/357335311 Pay attention to the information in the comments, it is very important:

After this setting, localhost can display the interface, but PixelDemo.htm still can't travel, refer to Player.htm, modify PixelDemo.htm, and you're done.

webRtcPlayer.js modified content:

 this.video = createWebRtcVideo();

 this.cfg.offerExtmapAllowMixed = false;

 onsignalingstatechange = function(state) {
    console.info('signaling state change:', state)
 };


// offer.sdp = offer.sdp.replace("useinbandfec=1", "useinbandfec=1;stereo=1;maxaveragebitrate=128000");
  offer.sdp = offer.sdp.replace(/(a=extmap-allow-mixed)\r\n/gm, "");
  pc.setLocalDescription(offer);

PixelDemo.htm modified feasible interface:

<!-- Copyright Epic Games, Inc. All Rights Reserved. -->
<!DOCTYPE HTML>
<html>

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
        integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
        integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <link type="text/css" rel="stylesheet" href="/player.css">
    <script src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script type="text/javascript" src="/scripts/webRtcPlayer.js"></script>
    <script type="text/javascript" src="/scripts/app.js"></script>
    <script type="text/javascript" src="PixelDemo.js"></script>
    <link type="text/css" rel="stylesheet" href="PixelDemo.css">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- For iPhone X the following makes it use the entire screen space for the webpage https://webkit.org/blog/7929/designing-websites-for-iphone-x/ -->
    <meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
</head>

<body onload="load()">
    <nav id="sidebar">
        <ul id="sidebarlist" class="list-unstyled components">
            <li>
                <a href="#charSubmenu" data-toggle="collapse" aria-expanded="false"
                    class="dropdown-toggle">Characters</a>
                <ul class="collapse list-unstyled" id="charSubmenu">
                    <li>
                        <a href="#" onclick="onConfigButton(0,0)"><img src="images/Aurora.png" width="150px" />
                            <h2><span>Aurora</span></h2>
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="onConfigButton(0,1)"><img src="images/Crunch.png" width="150px" />
                            <h2><span>Crunch</span></h2>
                        </a>
                    </li>
                </ul>
        </ul>
    </nav>

    <div class="wrapper">

        <div id="content" class="container">
            <div id="player"></div>
            <div id="overlay" class="overlay">
                <div>
                    <div id="qualityStatus" class="greyStatus"></div>
                    <div id="overlayButton"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"
        integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em"
        crossorigin="anonymous"></script>
</body>

</html>

This will run through.

UE4 PixelStreamingDemo verification

Guess you like