PixelStreaming settings

Official Guide for Pixel Streaming

Installation

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

Settings

src/Player.tsx

import React from 'react'

// libs
import { Player, ContextProvider, usePlayer, useSystem, PlayerPropsSchema } from 'pixel-streaming'


const PlayerContext: React.FC<any> = ({ build }: any) => {
  const player = usePlayer()
  const system = useSystem()

  React.useEffect(() => {

    if (player.cls.initReady) {
      // player.cls.initPlayer('https://i-00c56684d4fff23e4.cloudvec.com')
      system.cls.connectBuild(build)
    }

  }, [player.cls.initReady])

  return (
    <Player {...playerConfig} />
  )

}

const playerConfig: PlayerPropsSchema = {
  // apiKey: '3e9e49c6-60eb-469b-80b6-9a9b53fa7f73',
  metaConfig: {
    showToolbar: true,
    showQuickMenu: true,
    showDevBar: true,
    showOverlay: true,
    notifications: {
      showCommands: false,
      showCallbacks: false,
      placement: 'topStart',
    },
    videoUrl: null,
    issuesUrl: 'https://metaeditor.io/feature-requests/',
  },
  config: {
    secondsToKill: 60 * 5,
    secondsToStart: 0,
    autoRestart: true,
  },
  psConfig: {
    enableVerboseLogging: false,
    enableSpsAutoplay: true,
    startVideoMuted: false,
    autoPlayAudio: false,
    controlScheme: 1,
    suppressBrowserKeys: true,
    fakeMouseWithTouches: true,
  },
  ueSettings: {
    Encoder: {
      TargetBitrate: -1,
      MaxBitrate: 20000000,
      MinQP: 0, //-1
      MaxQP: 51, //-1
      RateControl: 'CBR', //"CBR" | "VBR" | "ConstQP"
      FillerData: true,
      MultiPass: 'FULL', //"DISABLED" | "QUARTER" | "FULL";
    },
    WebRTC: {
      DegradationPref: 'MAINTAIN_FRAMERATE', //"BALANCED" | "MAINTAIN_FRAMERATE" | "MAINTAIN_RESOLUTION";
      MinBitrate: 100000,
      MaxBitrate: 20000000,
      LowQP: 25,
      HighQP: 37,
      MaxFPS: 60,
      FPS: 60,
    },
    Console: {
      cursor: false,
      hudSats: true,
    }
  }
}

const CustomPlayer: React.FC<any> = ({ build }) => (
  <ContextProvider>
    <PlayerContext build={build} />
  </ContextProvider>
)

export default CustomPlayer

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.