Screen + Webcam

Loom-style recording combines two live sources. The screen comes from the browser’s screen-sharing picker (getDisplayMedia) and the camera from getUserMedia. This recorder draws both onto a canvas thirty times a second: the shared surface is fitted into the frame and your webcam is cropped to a square and clipped to a circle, a rounded square or a plain square. The canvas is then turned back into a video stream and encoded by MediaRecorder, so the bubble is baked into every frame and nothing needs lining up in an editor afterwards.

You can preview the camera before you start and position the bubble with the corner buttons, by dragging it on the preview, or with the arrow keys. The size runs from 10% to 45% of the frame width, and you can mirror the camera and add a thin white outline. While recording, the bubble can still be dragged and resized, hidden and shown again, and the microphone can be muted without stopping the take. Your microphone and the tab or system audio (when you tick “Share audio” in Chromium browsers) are mixed with the Web Audio API into one soundtrack.

The output takes the aspect ratio of what you share and is scaled down to at most 720p, 1080p or 1440p, or kept at native size. Recent Chrome, Edge and Safari can write MP4 (H.264) directly, and the tool uses it when available; otherwise it records WebM. A WebM take can be converted to MP4 afterwards with FFmpeg compiled to WebAssembly, which downloads about 31 MB once and runs locally. Expect that conversion to take roughly as long as the recording, or longer for 1080p on an older laptop.

There is one honest limitation. Browsers slow down pages in background tabs to save power. Drawing runs on a Web Worker timer rather than requestAnimationFrame, so it keeps going while you work in another tab or app, but some browsers may still lower the frame rate of a hidden tab. If a recording stutters, open the recorder in its own small window and keep it visible while you share a different window.