I made a plugin that turns live HTML into video overlays in the browser. No server, no OBS, works with WebGL
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: snapdom.dev
- 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: zumerlab/snapdom
6 points · 8 comments
Mentions
SnapDOM just passed 1,000,000 weekly downloads on npm for the first time 🎉 Huge thanks to everyone using it, reporting bugs, sending PRs and sharing what you build. This one is yours. zumerlab/snapdom
I made a plugin that turns live HTML into video overlays in the browser. No server, no OBS, works with WebGL 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: snapdom.dev - 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: zumerlab/snapdom