PixelStreaming for ReactJS

Library for launching the player for Pixel Streaming (Unreal Engine v.5)

Connects to running STUN and TURN Servers.

---

---

Demo: https://markolofsen.github.io/pixel_streaming_sb/

Installation

npm install pixel-streaming
# or
yarn add pixel-streaming

Usage

import React from 'react';

// libs
import PixelStreaming, {DebugData} from 'pixel-streaming';

function App() {
  const refPixelStreaming = React.useRef(null)
  const [serverData, setServerData] = React.useState({host: 'http://127.0.0.1', port: 80})

  const actionClass = new class {
    constructor() {
      this.ref = refPixelStreaming.current
    }

    _emit(type, value, verification_id=undefined) {
      this.ref.emit({type, value, verification_id})
    }

    emitTestCommand(value) {
      this._emit('test_command_type', value)
    }
  }

  const renderForm = ({state, initConnection}) => {
    if(state.loaded) {
      return (
        <button onClick={() => actionClass.emitTestCommand(11)}>
          Test command
        </button>
      )
    }

    return (
      <form onSubmit={(event) => {
        event.preventDefault()
        event.stopPropagation()

        initConnection()
      }}>
        <input type="text" placeholder="http://127.0.0.1" value={serverData.host} onChange={(event) => setServerData(c => ({
          ...c, host: event.target.value
        }))} />
        <input style={{width: 50}} type="number" placeholder="80" value={serverData.port} onChange={(event) => setServerData(c => ({
          ...c, port: event.target.value
        }))} />
        <button type="submit">Connect</button>
      </form>
    )
  }

  return (
    <div>

      <PixelStreaming
        ref={refPixelStreaming}
        onLoad={(payload) => {
          console.warn('loaded', payload);
        }}
        onConnect={() => {
          console.warn('connected');
        }}
        onRestart={() => {
          // ...
        }}
        onError={(payload) => {
          console.error('error', payload);
        }}
        onClose={(payload) => {
          console.error('closed', payload);
        }}
        onCallback={(payload => {
          console.warn('callback', payload);
        })}
        onProgress={(payload) => {
          console.warn('progress', payload);
        }}
        onDebug={(payload) => {
          console.warn('debug', payload);
        }}
        secondsToStart={300}
        autoConnect={false}
        host={serverData.host}
        port={serverData.port} >
        {({state, initConnection}) => (
          <div style={{padding: 30}}>

            {renderForm({state, initConnection})}

            {<pre>{JSON.stringify(state, null, 4)}</pre>}

            <DebugData
              show
              style={{width: 300, backgroundColor: 'rgba(0,0,0,.2)'}}
            />

          </div>
        )}
      </PixelStreaming>

    </div>
  )
}

export default App

Props

Prop	Description	Type
secondsToStart	Approximate stream start time in seconds. Default: 0	int
autoConnect	Connect to stream automatically.  Default: true	bool
host	String host to url with signal server. If host starts wih https then it will be used wss  If starts with http then will be used ws Example: https://uuid1234567890.streamdomain.com	string
port	Port of signal server. Default: 80	int
children	The function receives parameters and renders the nested component Example: {(payload) => (...)} Incoming parameters:  state — Object with state data initConnection() — If autoConnect={false}, then use the initConnection() function to manually connect to the stream.	function
onLoad	When the stream started	function
onConnect	Called when the stream is running
onRestart	Called when the stream is restarted	function
onError	Called on errors in the webrtc connection
onClose	Called if the webrtc connection is closed
onCallback	Called when the stream server sends callbacks
onProgress	Return progress in percentage based on secondsToStart	function
onDebug	Incoming parameters: onDebug={({type, payload}) => {...}} Types: func, log, warn, info, error	function

Reference object data

refPixelStreaming.current.state

Variable	Default	Description
aggregated_stats	false
callback_caller	false
callback_loading	false
closed	false
connect	false
error	false
last_interaction	null
loaded	false
mouse_moving	false
quality_speed	false
resolution_multiplier	1.5
stream_config	false
users_count	0
window_size	{width: 0, height: 0}

Send command to stream server

refPixelStreaming.current.emit({
 type: 'string', //key of command
 value: 0, //string, bool, number
 verification_id: undefined, //server response with execute command by verification id
})

Attention!

• React v.17.0.2

• Apply style pointerEvents: 'none' to all JSX elements that overlap the stream.

Built With

• React - A JavaScript library for building user interfaces
• Unreal Engine Pixel Streaming - Library for Unreal Engine.
• Styled Jss - Styled Components on top of JSS

---

Use with pleasure!

UnrealOS.com Team