Frontend Controls

This page shows you how to interact with a running Streampixel session from your frontend—muting audio, changing resolution, reading stats, or sending custom messages to Unreal.

Frontend Controls

Everything happens through the objects returned by StreamPixelApplication():

Object	Purpose
pixelStreaming	Core WebRTC connection (connect / disconnect / events)
appStream	DOM wrapper for the video element, plus input helpers
UIControl	High-level runtime utilities (audio, resolution, stats, etc.)
queueHandler	Callback that reports the user’s queue position (if enabled)

🚦 Access Patterns

Create your React (or other framework) component and import the SDK as shown:

let pixelStreaming;   // store globally or in React ref
let UIControl;        // store globally or in React ref

const { appStream, pixelStreaming: ps, UIControl: ui } =
  await StreamPixelApplication({ appId: "<id>", AutoConnect: true });

pixelStreaming = ps;
UIControl      = ui;

Store these references once (e.g., in useRef or a context) so your buttons can call them later.

🔑 Common Runtime Actions

What you want to do	Code
Mute / un-mute audio	UIControl.toggleAudio();
Enable microphone (browser permission needed)	await navigator.mediaDevices.getUserMedia({audio:true}); pixelStreaming.unmuteMicrophone(true);
Change stream resolution	UIControl.handleResMax("1280x720");
Get supported resolutions	const list = UIControl.getResolution();
Read live stats (FPS, bitrate, res)	const stats = UIControl.getStreamStats();
Send a custom UI message to Unreal	appStream.stream.emitUIInteraction({ message:{ type:"setColor", value:"#ff6600" } });
Handle messages back from Unreal	pixelStreaming.addResponseEventListener("handle_responses", (data)=>console.log(data));
Disconnect the session	pixelStreaming.disconnect();
Get stream stats	const stats = UIControl.getStreamStats(); console.log(stats);
Turn on Browser Mouse Visibility (Runtime)	UIControlApp.toggleHoveringMouse(true)
Turn off Browser Mouse Visibility (Runtime)	UIControlApp.toggleHoveringMouse(false)

🖥️ Example: Building a Mini Control Panel (React)

export default function ControlPanel() {
  const toggleSound  = () => UIControl?.toggleAudio();
  const stats        = () => console.log(UIControl?.getStreamStats());
  const set720p      = () => UIControl?.handleResMax("1280x720");

  return (
    <div style={{position:"fixed",right:20,bottom:20,display:"flex",gap:8}}>
      <button onClick={toggleSound}>🔊 Mute / Unmute</button>
      <button onClick={set720p}>720 p</button>
      <button onClick={stats}>📊 Stats</button>
    </div>
  );
}

Cleanup: When your component unmounts, always call pixelStreaming.disconnect() to free WebRTC resources

🖥️ Example: Building a Mini Control Panel (React)

If your project uses queueing, register a handler:

queueHandler((msg) => {
  console.log(`You are position ${msg.position} out of ${msg.length}`);
});

You can display this info in a splash screen while the user waits for a slot.