` historically failed to start cold inside CEF
- * (see `app/src/features/human/Mascot/yellow/frameContext.tsx`); the
- * project replaced it with a local `FrameProvider` that drives ticks
- * via `requestAnimationFrame`. The compositions render to live SVG,
- * which we rasterize per frame: serialize → data URI → `
![]()
` decode
- * → drawImage → JPEG blob.
- */
-
-const PRODUCER_FPS = 24; // 24 fps is plenty for "lifelike" and gives
-// per-frame serialize+encode budget headroom — at 30 fps the SVG decode
-// occasionally backs up on slower machines and frames pile up. The
-// bridge consumer redraws its canvas at 30 fps regardless, repeating
-// our latest frame between producer ticks.
-
-// Producer renders at a *lower* resolution than the bridge canvas
-// (640×480) to keep SVG rasterization cheap. The bridge cover-fits
-// our 320×240 output up to 640×480, which is fine — the YellowMascot
-// SVG is vector and the user is watching a small video tile in Meet
-// that goes through Meet's own encoder, so source resolution is
-// invisible past ~360p anyway.
-//
-// Empirically (instrumented in the producer diag JSON): rendering at
-// 640×480 took ~1000 ms/frame on this hardware (img.decode of the
-// rich SVG dominates), pinning the producer to 1 fps. Halving each
-// dimension is a 4× rasterize speedup.
+const PRODUCER_FPS = 24;
const FRAME_W = 320;
const FRAME_H = 240;
const JPEG_QUALITY = 0.7;
-// Mascot inner-canvas dimensions. Mirrors the values YellowMascot
-// passes to FrameProvider — keep in sync if those change.
-const MASCOT_CANVAS = 1000;
-const MASCOT_LOOP_FRAMES = PRODUCER_FPS * 6;
-
interface BusSession {
requestId: string;
port: number;
@@ -116,43 +56,63 @@ export const MascotFrameProducer: FC = () => {
const ProducerSession: FC<{ session: BusSession }> = ({ session }) => {
const hostRef = useRef
(null);
- const mascotColor = useAppSelector(selectMascotColor);
const wsRef = useRef(null);
const wsReadyRef = useRef(false);
const stoppedRef = useRef(false);
const inflightRef = useRef(false);
- const sentFramesRef = useRef(0);
- // Frame counter feeding our own FrameContext below. We DON'T use the
- // shared `` wrapper because it ticks via
- // requestAnimationFrame, which Chromium throttles when the main
- // openhuman window is backgrounded behind the Meet window — the
- // mascot would freeze the moment the user clicks into Meet. The
- // worker tick below advances this state from `Date.now()` instead,
- // which keeps running regardless of focus.
- const [frame, setFrame] = useState(0);
- const startTimeRef = useRef(null);
- const frameAtTickRef = useRef(0);
+
+ const captureFrame = useCallback(async () => {
+ if (stoppedRef.current || !wsReadyRef.current || inflightRef.current) return;
+ const host = hostRef.current;
+ if (!host) return;
+ const canvas = host.querySelector('canvas');
+ if (!canvas) return;
+
+ inflightRef.current = true;
+ try {
+ const offscreen = new OffscreenCanvas(FRAME_W, FRAME_H);
+ const ctx = offscreen.getContext('2d');
+ if (!ctx) return;
+
+ const grad = ctx.createRadialGradient(
+ FRAME_W / 2,
+ FRAME_H / 2,
+ 0,
+ FRAME_W / 2,
+ FRAME_H / 2,
+ Math.max(FRAME_W, FRAME_H) * 0.7
+ );
+ grad.addColorStop(0, '#FBF3D9');
+ grad.addColorStop(1, '#EFE3B8');
+ ctx.fillStyle = grad;
+ ctx.fillRect(0, 0, FRAME_W, FRAME_H);
+
+ const inset = 0.06;
+ const fitW = FRAME_W * (1 - 2 * inset);
+ const fitH = FRAME_H * (1 - 2 * inset);
+ const scale = Math.min(fitW / canvas.width, fitH / canvas.height);
+ const dw = canvas.width * scale;
+ const dh = canvas.height * scale;
+ const dx = (FRAME_W - dw) / 2;
+ const dy = (FRAME_H - dh) / 2;
+ ctx.drawImage(canvas, dx, dy, dw, dh);
+
+ const blob = await offscreen.convertToBlob({ type: 'image/jpeg', quality: JPEG_QUALITY });
+ const buffer = await blob.arrayBuffer();
+ const ws = wsRef.current;
+ if (ws && ws.readyState === WebSocket.OPEN) {
+ ws.send(buffer);
+ }
+ } catch (err) {
+ console.warn('[meet-video-producer] capture failed', err);
+ } finally {
+ inflightRef.current = false;
+ }
+ }, []);
useEffect(() => {
stoppedRef.current = false;
- // ── Background-throttle defeater: muted autoplaying