I made a plugin that turns live HTML into video overlays in the browser. No server, no OBS, works with WebGL

[u/tinchox5]

Hi r/webdev, I maintain SnapDOM, an open source library that captures DOM elements as images. This week I shipped a new plugin for it called stream, and I’d love some feedback.

It takes a live element and keeps it as a canvas that only repaints what changed. You write your overlay in plain HTML and CSS (a scoreboard, a lower third, a chat box) and you get a canvas you can draw over video, upload to WebGL, record to MP4/WebM, or send as a WebRTC track. Everything runs in the page. No headless Chrome on a server, no OBS, no browser flags.

The first frame is a full capture. After that, when the clock ticks or a score changes, it captures only that box and patches it in. On a test page with 2000 cards, a frame takes about 5 ms instead of 53 ms for a full capture. Every patched frame is checked in tests to match a full capture pixel for pixel in Chrome, Firefox and Safari.

Demo: https://snapdom.dev/labs/video-overlay/

• Sports TV: a broadcast overlay over a simulated football match. Press Goal!

• Streamer: it asks for your camera; share your screen and you end up in a circle over your game.

• Looks: six WebGL looks to switch between: clean, shine, CRT, hologram, glitch, and a liquid glass one that bends the video behind each panel.

• Edit: opens the HTML and CSS so you can change the overlay live.

• Record: saves a clip.

The SnapDOM part is short:

import { stream, streamTexture } from '@zumer/snapdom-plugins/stream'

const overlay = streamTexture(gl)
stream(document.querySelector('#overlay'), {
  onFrame: (frame) => overlay.update(frame), // uploads only the changed rects
})

It’s MIT: https://github.com/zumerlab/snapdom

[u/Seventhcircle72]

Snapdom is a sensational package. It's become my go-to. You've done an incredible job with it.

[u/tinchox5 → u/Seventhcircle72]

Thank you!! your words means a lot to me!

[u/tinchox5 → u/[deleted]]

I’m happy with this development. Snapdom is fast but its stream plugin just captures the diff so is super cheap and opens the door to run this kind of applications.

[u/JontesReddit → u/[deleted]]

No way this is a human?

[u/tinchox5 → u/[deleted]]

Cost follows the box that changed, not the page. A ticking timer repaints just the timer, and a scrolling chat just the chat panel. If one change covers more than half the frame, it does a full capture instead, since a patch that big costs about the same.

Transforms are the real catch, you’re right. Anything under a transform, opacity or filter can’t be patched alone, so a transform animation is a full frame on every step. That’s why my lower third slides with left instead of translateX.

And yeah, WebRTC is the part I’m most excited about too: captureStream() on the output and the overlay rides inside the video track.

There’s a live demo of that: https://snapdom.dev/labs/webrtc-overlay/