MetaEditor

Player component. If you put your code in children, then it will be displayed on top of the video.

Player.tsx

import { MetaEditor } from "pixel-streaming";

export default function PlayerView() {

  return (
    <MetaEditor
      debugMode
      showToolbar
      psHost="ws://127.0.0.1:80"
      psConfig={{
        autoPlay: false,
        autoConnect: true,
        startMuted: true,
        hoveringMouse: true,
        fakeMouseWithTouches: true,
        matchViewportRes: true,
      }}
    >
      <div>
          Content & Buttons
      </div>
    </MetaEditor>
  );
}

Settings

Name	Description
children?	React.ReactElement — optional
debugMode	boolean — Show notifications when commands are sent.
showToolbar	boolean — Show developer panel
psHost	string — Host running Signaling Server. For local development ws://127.0.0.1:80 For production version wss://yourdomain.com (SSL certificate required)
psConfig	object — Pixel Streaming Configuration

psConfig

Name	Description
autoPlay	boolean — Play videos automatically. Attention, it works if startMuted: true
autoConnect	boolean — Open webrtc connection automatically
startMuted	boolean — Mute sound
hoveringMouse	boolean — If true, then the cursor will not disappear
fakeMouseWithTouches	boolean — Emulate mouse clicks on mobile devices
matchViewportRes	boolean — Send command to Unreal Engine on resolution change