Quick Start

This page helps users go from zero to a working integration using the WebSDK.

🚀 Getting a Stream Running in React

This page helps users go from zero to a working integration using the WebSDK.

import React, { useEffect, useRef } from 'react';
import { StreamPixelApplication } from 'streampixelsdk';

const App = () => {
  const videoRef = useRef(null);

  useEffect(() => {
    const startStream = async () => {
      const { appStream } = await StreamPixelApplication({
        AutoConnect: true,
        appId: "your-app-id", // Replace with your real projectId from the dashboard
      });

      if (videoRef.current) {
        videoRef.current.appendChild(appStream.rootElement);
      }
    };

    startStream();
  }, []);

  return <div ref={videoRef} style={{ height: "100vh" }} />;
};

export default App;

🔐 Replace appId

Get your appId from the StreamPixel Dashboard, inside your project settings and clicking on copy projectId button

/src
  └── components/
        └── StreamPixelApp.js
  └── App.js
  └── index.js

✅ That’s it!

This will:

• Connect to the Streampixel platform

• Load your Unreal Engine project

• Auto-play the stream

• Use your default settings from the dashboard