Webcam Live Input Stream
Your Webcam, Live, in a ComfyUI Graph
- image
- IMAGE
This is the node that plugs a live webcam feed into your graph as a plain IMAGE, with a live preview right on the node and pixel-exact cropping. Which means you can point a camera at yourself and run ControlNet, IP-Adapter, or a straight img2img pass over whatever is in front of it - no "load a screenshot every few seconds" dance. It was built by Wouter Verweirder (for his SAIAR research group, whose members needed to pose in front of a camera while a model watched), and it shows: the whole thing is designed around a person actually using it live.
How it works
Here's the thing most people get wrong on first contact: the capture happens in your browser, not on the ComfyUI server. The Python side of this node is a paper-thin subclass of ComfyUI's own LoadImage - it just reads an image path. All the actual work is front-end JavaScript. It calls getUserMedia to grab the camera, draws every frame onto a canvas (applying the trims there), uploads that frame as a PNG to ComfyUI's /upload/image temp storage, and hands the returned path to the LoadImage logic. An IS_CHANGED override makes the graph re-run as frames update, so you get a stream of fresh IMAGE tensors as long as the queue is running.
That browser-side design is a feature and a trap at once. Feature: ComfyUI can be running on a faraway box and your laptop's webcam still feeds the graph, because it's your browser doing the capturing. Trap: it will not work as a pure API/headless node - no browser, no capture.
The inputs that matter
The node has a stack of widgets, but you mostly touch a handful:
- device - auto-fills as a dropdown of every camera your browser can see. Leave it empty and it picks one and writes back the actual device ID it used. With multiple webcams, this is how you switch.
- desired_width / desired_height - default 1920×1080. These are "ideal" constraints, not hard demands; the camera delivers what it can and the preview shows the truth.
- frame_rate - default 30, also an ideal on the capture side. More on that below.
- trim_left / trim_right / trim_top / trim_bottom - pixels chopped off each edge, applied before upload. This is the headline feature: you see the cropped result in the live preview, so you can reframe the camera feed without touching the lens.
The image input is a DOM widget that renders the live preview inside the node - nothing to configure, just your window into what the graph is about to eat.
Wiring it up
The single output is IMAGE, so it plugs into anything that accepts an image: VAEEncode for img2img, any ControlNet preprocessor, an IP-Adapter reference slot, or a simple preview. The classic demo is a canny/pose ControlNet on the webcam feed - you wave, and the model redraws you in whatever style is loaded. It also pairs well with a fast, low-step model if you actually want the output to feel live.
Installing it
Same story for all three nodes in this pack, and it's the easy kind:
cd ComfyUI/custom_nodes
git clone https://github.com/wouterverweirder/comfyui_live_input_stream
...then restart ComfyUI. Or just search "ComfyUI Live Input Stream" in ComfyUI Manager and let it do the work. There are no extra Python dependencies - the pyproject.toml declares an empty dependency list, and no model files to download. The proxy it needs for MJPEG streams rides on aiohttp, which ComfyUI already ships. After a few rounds of the ecosystem's usual dependency hell, a pack this light is genuinely refreshing.
Where people get burned
- Secure context.
getUserMediarefuses to run over plain-HTTP on anything butlocalhost. Accessing ComfyUI over a LAN IP? The node will print a red message telling you to enable HTTPS. It's not broken, it's the browser. - The node has to be visible. Capture stops the moment the node leaves the DOM - collapse it or navigate away and the stream dies. Keep it on screen while the graph runs.
- frame_rate is aspirational. Every frame is a full PNG upload plus a decode plus your whole pipeline. The widget asks the camera for 30fps; what you actually get is however many frames per second your graph can chew through. Treat "live" as "a few steps behind reality," not a mirror.
- Temp PNGs pile up. Every frame lands in ComfyUI's temp folder as a file. It self-cleans eventually, but on a long session you'll see thousands of
webcam/*.pngfiles sitting there.
For the old-timers who remember the toyxyz webcam hack: this is the maintained, preview-included successor to that whole idea, and it's the one I'd reach for now.
Inputs (9)
| Name | Type | Default | Description |
|---|---|---|---|
| device | STRING | — | |
| desired_width | INT | 19201–16384 | — |
| desired_height | INT | 10801–16384 | — |
| frame_rate | INT | 301–120 | — |
| image | WEBCAM_ADVANCED | — | |
| trim_left | INT | 00–16384 | — |
| trim_right | INT | 00–16384 | — |
| trim_top | INT | 00–16384 | — |
| trim_bottom | INT | 00–16384 | — |
Outputs (1)
| Name | Type | Description |
|---|---|---|
| IMAGE | IMAGE | — |