Foveated Streaming Engine: High-performance, bandwidth-efficient screen sharing using WASM and Dynamic ROI.
npm install @hexaversia/fovea-sdkbash
npm install fovea-sdk
`
(Note: During private beta, install from local path or private registry)
Usage
$3
`javascript
const FoveaEngine = require('fovea-sdk');
const path = require('path');
async function start() {
const engine = new FoveaEngine({ blurAmount: '12px' });
// Initialize with local WASM file
await engine.initialize({
wasmPath: path.join(__dirname, 'node_modules/fovea-sdk/fovea_rs/pkg/fovea_wasm_bg.wasm')
});
function loop() {
// Process video frame -> canvas
const result = engine.process(videoElement, outputCanvas);
if (result && result.type === 'foveated') {
console.log(ROI: ${JSON.stringify(result.bbox)});
}
requestAnimationFrame(loop);
}
}
`
$3
Copy the .wasm file to your public assets folder first.
`javascript
import FoveaEngine from 'fovea-sdk';
const engine = new FoveaEngine();
// Initialize by fetching WASM from public URL
await engine.initialize({
wasmPath: '/assets/fovea_wasm_bg.wasm'
});
// ... use engine.process() in your render loop
`
Real-World Example
Using Fovea with an AI Video Analyzer to detect and describe drawings in real-time with minimal bandwidth usage:
!Real-World Demo
API
$3
- config.blurAmount: CSS blur string (default '8px')
- config.diffThreshold: Sensitivity (0-255) for change detection (default 30)
$3
- options.wasmPath: Path (Node) or URL (Browser) to the .wasm binary.
- options.wasmBuffer: ArrayBuffer of the WASM binary (optional alternative).
$3
- video: Source HTMLVideoElement
- canvas: Target HTMLCanvasElement (where the foveated effect is drawn)
- Returns: { type, bbox, isKeyframe }`