Skip to content

BUILD_INTEGRATION.md

Latest commit

 

History

History
81 lines (67 loc) · 2.58 KB

BUILD_INTEGRATION.md

File metadata and controls

81 lines (67 loc) · 2.58 KB

Build Integration Notes

StreamCompositor Integration

The StreamCompositor class has been added to the EmulatorJS-SFU project and needs to be included in the build.

File Location

data/src/netplay/compositing/StreamCompositor.js

Build Order Requirements

The following modules must be loaded in this order during concatenation:

  1. NetplayEngine (uses StreamCompositor)
  2. SFUTransport
  3. NetplayMenu
  4. StreamCompositor ← NEW (must be before NetplayEngine)

Recommended Build Order Update

In build.js or your build configuration, add StreamCompositor.js to the netplay source files before NetplayEngine:

// Current build files (example order)
[
  'data/src/netplay/compositing/StreamCompositor.js',  // ← ADD HERE (NEW)
  'data/src/netplay/core/NetplayEngine.js',
  'data/src/netplay/core/transport/SFUTransport.js',
  'data/src/netplay/ui/NetplayMenu.js',
  // ... other files
]

Concatenation Test

After building, verify the class is available globally:

// Should work after build
if (typeof StreamCompositor !== 'undefined') {
  console.log('StreamCompositor loaded successfully');
}

No External Dependencies

StreamCompositor has zero external dependencies:

  • Uses native HTML5 Canvas API
  • Uses native MediaStream API
  • Uses native requestAnimationFrame
  • Self-contained class definition
  • Works in all modern browsers

Global Assignment

The class is self-contained and doesn't export to window directly, but NetplayEngine will use it after it's defined in the global scope.

Production Build

After adding to build:

  1. Run build: npm run build
  2. Check output file size increase (~5-10KB minified)
  3. Verify Canvas API available in target browsers
  4. Test arcade lobby stream compositing

Development Testing

For development/testing before full build:

  1. Include StreamCompositor.js separately in HTML before NetplayEngine
  2. Test stream registration and rendering
  3. Verify FPS and memory usage
  4. Test pin/unpin functionality

Performance Impact

  • Memory: ~1MB per 30 video streams (hidden video elements)
  • CPU: ~5-10% for 30 FPS canvas rendering on modern hardware
  • Network: Single canvas stream vs multiple streams = bandwidth savings

Browser Compatibility

✅ Chrome/Edge 74+ ✅ Firefox 73+ ✅ Safari 15+ ⚠️ Mobile browsers (Safari on iOS has limited captureStream support)

Known Limitations

  1. Canvas.captureStream() may not work in some sandboxed contexts
  2. High stream counts (10+) may impact mobile performance
  3. Video elements must remain in DOM (even though hidden) for playback