HeiLin/public/pixelstreaming/streamer.js

class Streamer {
  constructor(containerId, options = {}) {
    this.containerId = containerId;
    this.options = {
      url: 'ws://localhost:8888',
      ...options
    };
    this.player = null;
  }

  async init() {
    try {
      // 动态加载UE5像素流的JavaScript库
      await this.loadScript('https://cdn.jsdelivr.net/npm/@epicgames-ps/pixel-streaming@latest/dist/player.js');
      
      // 初始化播放器
      this.player = new PixelStreaming.Player({
        onStateChange: (state) => {
          console.log('Streamer state changed:', state);
        },
        onError: (error) => {
          console.error('Streamer error:', error);
        }
      });

      // 连接到UE5服务器
      await this.player.connect(this.options.url);

      // 将播放器附加到容器
      const container = document.getElementById(this.containerId);
      if (container) {
        this.player.mount(container);
        console.log('Streamer initialized successfully');
      } else {
        throw new Error(`Container with id ${this.containerId} not found`);
      }
    } catch (error) {
      console.error('Failed to initialize streamer:', error);
      throw error;
    }
  }

  loadScript(url) {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = url;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }

  disconnect() {
    if (this.player) {
      this.player.disconnect();
      console.log('Streamer disconnected');
    }
  }
}

// 将Streamer类挂载到window对象上
window.Streamer = Streamer;