Pixel Streaming Reactjs plugin for Unreal Engine 5.2

Installation

Install with npm:

npm install rsuite pixel-streaming --save

Install with yarn:

yarn add rsuite pixel-streaming

Links:

• Online Player
• CodeSandBox
• Nextjs Sample | fork me | installation
• Signalling Server App
• Plugin for Unreal Engine
• Documentation
• Discord Community

Usage

import * as React from "react";
import "rsuite/dist/rsuite.min.css";
import { Button } from "rsuite";
import { MetaProvider, MetaEditor, Hooks, Context } from 'pixel-streaming'

const PlayerView = () => {
  const refPlayer = React.useRef(null)
  
  // context
  const global = Context.global()
  const stream = Context.stream()

  // hooks
  const actions = Hooks.actions()

  return (
    <MetaEditor
      ref={refPlayer}
      debugMode="on"
      showToolbar={true}
      onLoad={() => {
        console.log('@'.repeat(30))
        console.dir(refPlayer.current)
        console.dir(global) 
        console.dir(stream)
        console.dir(actions)
      }}
      psHost="ws://127.0.0.1:80"
      psConfig={{
        "autoPlay": true,
        "autoConnect": true,
        "startMuted": true,
        "hoveringMouse": true,
        "fakeMouseWithTouches": true,
        "matchViewportRes": true
    }}>
      <Button onClick={() => actions.emitUi({ action: "ui_command" })}>
        Send action
      </Button>
    </MetaEditor>
  );
};

export default function AppHOC() {
  return (
    <MetaProvider>
      <PlayerView />
    </MetaProvider>
  );
}

About Pixel Streaming for Unreal Engine

Pixel streaming is a powerful technology that enables remote rendering and streaming of real-time 3D graphics to any device, anywhere in the world. It has many applications, including online gaming, remote work, and virtual events. However, setting up a pixel streaming environment can be challenging, especially for those who are not familiar with complex server configurations and network setups. This library provides a simple and easy-to-use solution for streaming real-time 3D content over the internet. It allows users to set up a pixel streaming server with just a few clicks, and then stream the content to any device with a compatible web browser. The Pixel Streaming Plugin for Unreal Engine can save developers a significant amount of time and effort when it comes to configuring a pixel streaming environment. This is because the library comes with pre-built configurations and settings that work out of the box, meaning developers don't need to spend time tinkering with complex server configurations or network setups. One of the key benefits of using the Pixel Streaming Plugin is that it eliminates the need for users to install any additional software or plugins on their devices. All they need is a compatible web browser and an internet connection, and they can access the streaming content from anywhere in the world.

Attention!

• React 18.1.0
• Node 16.*

Built With

• React — A JavaScript library for building user interfaces
• MetaEditor — Complete set of tools for professional developing and running the Unreal Engine’s Applications in browsers.
• Unreal Engine Pixel Streaming — Library for Unreal Engine.
• React Suite — Set of react component libraries for enterprise system products.

Thank you!

Github profile

License

Pixel Streaming for React.js is licensed under the MIT License.