Desktop App Integration

npm install @wave/electron-sdk electron-builder

# Or with yarn
yarn add @wave/electron-sdk electron-builder

import { app, BrowserWindow, desktopCapturer, ipcMain } from 'electron';
import { WaveElectron, CaptureSource, StreamConfig } from '@wave/electron-sdk';

// Initialize WAVE SDK
const wave = new WaveElectron({
  apiKey: process.env.WAVE_API_KEY!,
  // Enable hardware acceleration if available
  hardwareAcceleration: {
    preferredEncoder: 'auto', // 'nvenc' | 'qsv' | 'vce' | 'auto'
    fallbackToSoftware: true,
  },
});

let mainWindow: BrowserWindow;
let currentStream: ReturnType<typeof wave.streams.create> | null = null;

app.whenReady().then(async () => {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js'),
    },
  });

  // Register IPC handlers
  setupIpcHandlers();

  mainWindow.loadFile('index.html');
});

function setupIpcHandlers() {
  // Get available capture sources
  ipcMain.handle('get-sources', async () => {
    const sources = await desktopCapturer.getSources({
      types: ['screen', 'window'],
      thumbnailSize: { width: 320, height: 180 },
    });

    return sources.map(source => ({
      id: source.id,
      name: source.name,
      thumbnail: source.thumbnail.toDataURL(),
      appIcon: source.appIcon?.toDataURL(),
    }));
  });

  // Start streaming
  ipcMain.handle('start-stream', async (_, config: StreamConfig) => {
    try {
      currentStream = await wave.streams.create({
        title: config.title || 'Desktop Stream',
        protocol: 'webrtc',
        source: {
          type: config.sourceType,
          id: config.sourceId,
          captureOptions: {
            cursor: 'always',
            resolution: config.resolution || '1080p',
            frameRate: config.frameRate || 60,
          },
        },
        audio: {
          system: {
            enabled: config.captureSystemAudio,
            device: 'default',
          },
          microphone: {
            enabled: config.captureMicrophone,
            device: config.microphoneDevice || 'default',
            noiseSuppression: true,
            echoCancellation: true,
          },
        },
        encoding: {
          codec: 'h264',
          bitrate: config.bitrate || 6000,
          keyframeInterval: 2,
        },
      });

      return {
        success: true,
        streamUrl: currentStream.url,
        streamKey: currentStream.key,
      };
    } catch (error) {
      console.error('Stream creation failed:', error);
      return { success: false, error: error.message };
    }
  });

  // Stop streaming
  ipcMain.handle('stop-stream', async () => {
    if (currentStream) {
      await wave.streams.stop(currentStream.id);
      currentStream = null;
    }
    return { success: true };
  });

  // Get stream stats
  ipcMain.handle('get-stream-stats', async () => {
    if (!currentStream) return null;

    return await wave.streams.getStats(currentStream.id);
  });
}

// Handle app lifecycle
app.on('window-all-closed', async () => {
  if (currentStream) {
    await wave.streams.stop(currentStream.id);
  }
  if (process.platform !== 'darwin') app.quit();
});

import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('waveDesktop', {
  getSources: () => ipcRenderer.invoke('get-sources'),
  startStream: (config: StreamConfig) => ipcRenderer.invoke('start-stream', config),
  stopStream: () => ipcRenderer.invoke('stop-stream'),
  getStreamStats: () => ipcRenderer.invoke('get-stream-stats'),

  // Listen for stream events
  onStreamEvent: (callback: (event: StreamEvent) => void) => {
    ipcRenderer.on('stream-event', (_, event) => callback(event));
  },
});

import { useState, useEffect } from 'react';

interface CaptureSource {
  id: string;
  name: string;
  thumbnail: string;
}

export function StreamController() {
  const [sources, setSources] = useState<CaptureSource[]>([]);
  const [selectedSource, setSelectedSource] = useState<string | null>(null);
  const [isStreaming, setIsStreaming] = useState(false);
  const [streamUrl, setStreamUrl] = useState<string | null>(null);
  const [stats, setStats] = useState<StreamStats | null>(null);

  useEffect(() => {
    loadSources();
  }, []);

  useEffect(() => {
    if (!isStreaming) return;

    const interval = setInterval(async () => {
      const stats = await window.waveDesktop.getStreamStats();
      setStats(stats);
    }, 1000);

    return () => clearInterval(interval);
  }, [isStreaming]);

  async function loadSources() {
    const sources = await window.waveDesktop.getSources();
    setSources(sources);
  }

  async function startStream() {
    if (!selectedSource) return;

    const result = await window.waveDesktop.startStream({
      sourceId: selectedSource,
      sourceType: 'screen',
      captureSystemAudio: true,
      captureMicrophone: true,
      resolution: '1080p',
      frameRate: 60,
      bitrate: 6000,
    });

    if (result.success) {
      setIsStreaming(true);
      setStreamUrl(result.streamUrl);
    } else {
      alert('Failed to start stream: ' + result.error);
    }
  }

  async function stopStream() {
    await window.waveDesktop.stopStream();
    setIsStreaming(false);
    setStreamUrl(null);
    setStats(null);
  }

  return (
    <div className="p-6">
      <h2 className="text-xl font-bold mb-4">WAVE Desktop Streamer</h2>

      {!isStreaming ? (
        <div>
          <h3 className="font-semibold mb-2">Select Source</h3>
          <div className="grid grid-cols-3 gap-4">
            {sources.map(source => (
              <button
                key={source.id}
                onClick={() => setSelectedSource(source.id)}
                className={`p-2 border rounded ${
                  selectedSource === source.id ? 'border-primary-500' : 'border-border-secondary'
                }`}
              >
                <img src={source.thumbnail} alt={source.name} className="w-full" />
                <p className="text-sm mt-1 truncate">{source.name}</p>
              </button>
            ))}
          </div>

          <button
            onClick={startStream}
            disabled={!selectedSource}
            className="mt-4 px-4 py-2 bg-primary-600 text-white rounded disabled:opacity-50"
          >
            Start Streaming
          </button>
        </div>
      ) : (
        <div>
          <div className="bg-success-100 p-4 rounded mb-4">
            <p className="font-semibold text-success-800">🔴 Live</p>
            <p className="text-sm text-success-700">{streamUrl}</p>
          </div>

          {stats && (
            <div className="grid grid-cols-4 gap-4 mb-4">
              <div className="bg-surface-tertiary p-3 rounded">
                <p className="text-xs text-text-muted">Bitrate</p>
                <p className="font-semibold">{(stats.bitrate / 1000).toFixed(0)} Kbps</p>
              </div>
              <div className="bg-surface-tertiary p-3 rounded">
                <p className="text-xs text-text-muted">FPS</p>
                <p className="font-semibold">{stats.frameRate}</p>
              </div>
              <div className="bg-surface-tertiary p-3 rounded">
                <p className="text-xs text-text-muted">Resolution</p>
                <p className="font-semibold">{stats.width}x{stats.height}</p>
              </div>
              <div className="bg-surface-tertiary p-3 rounded">
                <p className="text-xs text-text-muted">Dropped Frames</p>
                <p className="font-semibold">{stats.droppedFrames}</p>
              </div>
            </div>
          )}

          <button
            onClick={stopStream}
            className="px-4 py-2 bg-destructive-600 text-white rounded"
          >
            Stop Streaming
          </button>
        </div>
      )}
    </div>
  );
}