PixelStreaming settings

Connects to running STUN and TURN Servers.

Module installation

yarn add pixel-streaming

Usage

import React from "react";

// libs
import PixelStreaming from "pixel-streaming";

export default function Player(props) {
  const refPixelStreaming = React.useRef(null);

  return (
    <PixelStreaming
      ref={refPixelStreaming}
      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);
      }}
      onCallback={(payload) => {
        // console.warn('callback', payload);
      }}
      onProgress={(payload) => {
        // console.warn('progress', payload);
      }}
      autoConnect={true}
      quality={1}
      isDev={true}
      host="http://127.0.0.1"
      port={80}
    >
      {(payload) => <div style={{ padding: 30 }}>{props.children}</div>}
    </PixelStreaming>
  );
}

Props

Prop	Description	Type
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

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({
 verification_id: undefined, //server response with execute command by verification id
 command: 'user_sound', //key of command
 request: {
   body: {
     volume: 1,
   }   
 },
})

Event for handling callbacks from Unreal Engine

To get callbacks, you can use the built-in method:

<PixelStreaming onCallback={payload => console.log(payload) } />}

const eventKey = 'metaeditor_callback'
document.addEventListener(eventKey, event => {
    response = event.detail
    console.log(response)
})

/*
// Response Example:

{
    "verification_id": "autogenerated__1",
    "initiator": "browser",
    "command": "user_sound",
    "request": {
        "body": {
            "volume": 1
        }
    },
    "response": {
        "time": "Apr 20, 2022, 6:20:15 AM",
        "body": {
            "volume": 1
        }
    }
}
*/

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