CODEWITHSUNDEEP
javascriptreactjspixelunreal-engine4unrealscript
Bdellinger
Bdellinger

Reputation: 13

Running pixel stream in react component?

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

I’ve followed the Unreal documentation, such as: https://docs.unrealengine.com/4.27/en-US/SharingAndReleasing/PixelStreaming/CustomPlayer/.

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.

Upvotes: 1

Views: 1047

Answers (1)

Noah670
Noah670

Reputation: 81

For anyone else looking into an updated solution for integrating the existing pixel stream implementation provided by Unreal, MetaEditor provides an open source react pixel streaming framework although you will need to update some of the existing vanilla JavaScript components .

Here's an example of using the component to start a pixel stream from the documentation.

<MetaEditor
       ref={refMetaEditor}
       onLoad={(payload) => {
         // console.warn('loaded', payload);
       }}
       onConnect={() => {
         // console.warn('connected');
       }}
       onRestart={() => {
         // console.warn('onRestart');
       }}
       onError={(payload) => {
         // console.error('error', payload);
       }}
       onClose={(payload) => {
         // console.error('closed', payload);
       }}
       onCommand={(payload => {
         // console.warn('command', payload);
         refContent.current.onCommand(payload)
       })}
       onCallback={(payload => {
         // console.warn('callback', payload);
         refContent.current.onCallback(payload)
       })}
       onProgress={(payload) => {
         // console.warn('progress', payload);
       }}
       autoConnect={autoConnect}
       quality={1}
       isDev={isDev}
       host={serverData.host}
       port={serverData.port} >

       {(payload) => (

         <MetaEditorProvider>
           <ContextProvider>
             <PlayerContent
               ref={refContent}
               setServerData={setServerData}
               autoConnect={autoConnect} />
           </ContextProvider>
         </MetaEditorProvider>
       )}
     </MetaEditor>

Upvotes: 0

Related Questions