Browser-Based Streaming

// Stream a canvas element (games, animations, WebGL)
const canvas = document.getElementById('gameCanvas') as HTMLCanvasElement;

// Capture canvas at 60 FPS
const canvasStream = canvas.captureStream(60);

// Add audio if needed
const audioContext = new AudioContext();
const destination = audioContext.createMediaStreamDestination();
// ... connect your audio nodes to destination
canvasStream.addTrack(destination.stream.getAudioTracks()[0]);

// Create WAVE stream
const stream = await wave.streams.createFromMediaStream(canvasStream, {
  title: 'Game Stream',
  protocol: 'webrtc',
  metadata: {
    type: 'gaming',
    engine: 'three.js'
  }
});

// For WebGL with preserveDrawingBuffer
const gl = canvas.getContext('webgl', {
  preserveDrawingBuffer: true  // Required for canvas capture
});

// Performance optimization for high FPS
// Use requestVideoFrameCallback when available
if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
  // More efficient frame timing
}

import { WaveClient, BackgroundProcessor } from '@wave/browser-sdk';

const wave = new WaveClient({ apiKey: 'wave_pub_xxxxx' });

// Get webcam
const webcamStream = await navigator.mediaDevices.getUserMedia({
  video: { width: 1920, height: 1080 }
});

// Initialize background processor (uses TensorFlow.js BodyPix model)
const bgProcessor = new BackgroundProcessor({
  modelUrl: 'https://cdn.wave.inc/models/bodypix',
  mode: 'replace'  // 'blur' | 'replace' | 'none'
});

await bgProcessor.initialize();

// Option 1: Blur background
bgProcessor.setMode('blur', { strength: 15 });

// Option 2: Replace with image
bgProcessor.setMode('replace', {
  imageUrl: 'https://example.com/office-background.jpg'
});

// Option 3: Replace with video
bgProcessor.setMode('replace', {
  videoUrl: 'https://example.com/animated-background.mp4'
});

// Process the stream
const processedStream = bgProcessor.process(webcamStream);

// Create WAVE stream with processed video
const stream = await wave.streams.createFromMediaStream(processedStream, {
  title: 'Stream with Virtual Background'
});

// Performance stats
bgProcessor.on('performance', (stats) => {
  console.log('Processing FPS:', stats.fps);
  console.log('Latency:', stats.latency + 'ms');
});

// Toggle background on/off
function toggleBackground() {
  const currentMode = bgProcessor.getMode();
  bgProcessor.setMode(currentMode === 'none' ? 'blur' : 'none');
}

// Check permissions before requesting
async function checkPermissions() {
  const cameraPermission = await navigator.permissions.query({ name: 'camera' });
  const micPermission = await navigator.permissions.query({ name: 'microphone' });

  console.log('Camera:', cameraPermission.state);  // 'granted' | 'denied' | 'prompt'
  console.log('Mic:', micPermission.state);

  // Listen for permission changes
  cameraPermission.onchange = () => {
    console.log('Camera permission changed:', cameraPermission.state);
  };
}

// Handle permission errors gracefully
async function getMediaWithFallback() {
  try {
    // Try video + audio
    return await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  } catch (error) {
    if (error.name === 'NotAllowedError') {
      // Permission denied - show UI to explain why needed
      showPermissionExplanation();
    } else if (error.name === 'NotFoundError') {
      // No camera/mic found - try audio only
      try {
        return await navigator.mediaDevices.getUserMedia({ video: false, audio: true });
      } catch (audioError) {
        throw new Error('No media devices available');
      }
    } else if (error.name === 'NotReadableError') {
      // Hardware error or in use
      throw new Error('Camera/microphone is in use by another application');
    }
    throw error;
  }
}

// List available devices
async function getDevices() {
  const devices = await navigator.mediaDevices.enumerateDevices();

  const cameras = devices.filter(d => d.kind === 'videoinput');
  const mics = devices.filter(d => d.kind === 'audioinput');
  const speakers = devices.filter(d => d.kind === 'audiooutput');

  console.log('Cameras:', cameras.map(c => c.label));
  console.log('Microphones:', mics.map(m => m.label));
  console.log('Speakers:', speakers.map(s => s.label));

  return { cameras, mics, speakers };
}