Skip to main content
Version: v3.0

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.