Browser video recording is hard

Short summary

Building screen recording with camera overlays in the browser initially seems simple using MediaRecorder, but live canvas compositing causes frame drops on longer videos due to simultaneous decoding, drawing, and re-encoding overhead. The solution is to record screen and camera as separate streams during capture, then composite them together during export using OffscreenCanvas. This architecture provides better performance and control than attempting live compositing in the browser UI.

• •Record screen and camera separately during capture, not composited live
• •Live canvas compositing causes frame drops on longer videos due to decoding/encoding overhead
• •Composite videos during export phase using OffscreenCanvas for stable performance

Generated with AI, which can make mistakes.