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:
But it only resulted in errors as variables in the default app.js script were listed as “undefined” (e.g “j” and “game pad”.
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.
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>