在react组件中运行像素流？

Question

向这里的吞食者提问，他们有在像素流周围定制网页的经验。

我一直在关注虚幻的文档，比如：https://docs.unrealengine.com/4.27/en-US/SharingAndReleasing/PixelStreaming/CustomPlayer/。

我已经启动并运行了一个像素流，我可以加载默认的流页面，在这里和那里定制它，但是我仍然停留在实现我使用像素的实际目的上--在一个反应性应用程序中运行我的游戏。

问:有没有人能指导我如何将我的像素流网页转换成一个react组件，使用默认的普通js“app.js”脚本中提供的所有功能，以及它是相关的基本脚本？

有些事我试过了：

1. --将app.js作为一个react组件进行非常基本的格式化，player.html页面作为“返回()”

但这只会导致错误，因为默认的app.js脚本中的变量被列为“未定义”(例如“j”和“游戏垫”)。

1. 只在react组件的返回()中加载player.html文件及其脚本。

这导致菜单，但游戏没有加载。我相信这是因为“load()”(普通app.js文件中的一个关键函数)没有被调用。

很乐意分享更多的细节，但不想在一开始就超载这篇文章。感谢任何了解/经验让像素作为一个反应组件工作的人的任何帮助。

Answer 1

对于任何其他人来说，如果您正在研究一个更新的解决方案来集成由Unreal提供的现有像素流实现，那么MetaEditor提供了一个开放源码的react像素流框架，尽管您需要更新一些现有的普通JavaScript组件。

下面是一个使用组件从文档中启动像素流的示例。

<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>