pregunta para los desarrolladores aquí que tienen experiencia con la personalización de la página web en torno a un flujo de píxeles.
Seguí la documentación de Unreal, como: https://docs.unrealengine.com/4.27/en-US/SharingAndReleasing/PixelStreaming/CustomPlayer/ .
Tengo una transmisión de píxeles en funcionamiento, puedo cargar la página de transmisión predeterminada, personalizarla aquí y allá, pero estoy atascado en implementar mi propósito real de usar píxeles en primer lugar: ejecutar mi juego en una aplicación de reacción.
Pregunta: ¿Alguien tiene alguna guía sobre cómo puedo convertir mi página web de flujo de píxeles, con todas las funciones disponibles en el script predeterminado de vanilla js "app.js" provisto y sus scripts esenciales relacionados, en un componente de reacción?
Algunas cosas que he probado:
Pero solo resultó en errores ya que las variables en el script app.js predeterminado se enumeraron como "indefinidas" (por ejemplo, "j" y "game pad".
Esto resultó en el menú, pero el juego no se estaba cargando. Creo que esto se debe a que no se llamó a "load()", una función clave en el archivo vanilla app.js.
Feliz de compartir más detalles, pero no quiero sobrecargar esta publicación desde el principio. Agradecería cualquier ayuda de cualquier persona que tenga conocimiento o experiencia en hacer que el píxel funcione como un componente de reacción.
Para cualquier otra persona que busque una solución actualizada para integrar la implementación de transmisión de píxeles existente proporcionada por Unreal, MetaEditor proporciona un marco de transmisión de píxeles de reacción de código abierto, aunque deberá actualizar algunos de los componentes de JavaScript estándar existentes.
Aquí hay un ejemplo del uso del componente para iniciar un flujo de píxeles de la documentación.
<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>