Hosting pixel stream in a reactjs component?

Development Programming & Scripting
1

Hey everyone - question for devs here who have experience with customizing the webpage around a pixel stream.

Using UE version 4-27, chrome, VSC, react for web.

I’ve followed the Unreal documentation, such as: Customizing the Player Web Page | Unreal Engine Documentation.

I’ve got a pixel stream up and running, I can load the default stream page, customize it here and there, but am stuck on implementing my actual purpose of using pixel in the first place - running my game in a react application.

Question: Does anyone have any guidance on how I can convert my pixel stream web page, with all the functions available in the default vanilla js “app.js” script provided and it’s related essential scripts, to a react component?

Some things I’ve tried:

  1. A very rudimentary formatting the app.js as a react component with the player.html page as the “return()”

But it only resulted in errors as variables in the default app.js script were listed as “undefined” (e.g “j” and “game pad”.

  1. Loading just the player.html file with its scripts in the return() of a react component.

This resulted in the menu, but the game wasn’t loading. I believe this is because “load()”, a key function in the vanilla app.js file wasn’t being called.

Happy to share more details, but don’t want to overload this post at the onset. Would appreciate any help from anyone who has knowledge of/experience with getting pixel to work as a react component.

2 Likes
2

This solution could be interesting.
It’s definitely possible but it doesn’t look straightforward to implement.

1 Like
3

Hello @ !

The task is not easy. Making Pixel Streaming friends with frameworks like React.js is a lot of work. The fact is that the implementation of PixelStreaming uses 2 external libraries, and React does not like this.

Indeed, use the MetaEditor solution for Pixel Streaming. It’s free and works out of the box.

If you just want to work with a local stream, then you don’t even need to install MetaEditor, just go to their website and enter your localhost address in the connection panel.

Read more here https://metaeditor.io/docs/dev/localhost