Record demos, presentations and tutorials with a webcam that reacts to your hands
Screen recordings are boring. A slide, a cursor, a small square face in the corner. People zone out in the first ten seconds. The VisionPipe3D playground has always turned your webcam into something more fun: hand track
Screen recordings are boring. A slide, a cursor, a small square face in the corner. People zone out in the first ten seconds.
The VisionPipe3D playground has always turned your webcam into something more fun: hand tracking, lightning between your fingertips, hologram backgrounds, text that follows your hand. The new update takes those effects out of the playground and into the places you actually talk to people: demos, presentations and tutorials.
What's new
Record Screen
Click Record Screen, choose a tab, window or your whole screen, and you get:
- Your screen as the main video
- Your effected camera as a round bubble on top
- Mic audio, plus system/tab audio if you want it
When you're done, you get a video file. No upload, no account needed for the recording, nothing leaves your machine. If you hit End Session halfway through, the recording is still saved.
Pop Out camera
Click Pop Out and your effected camera opens as a picture-in-picture window that floats above every app.
This is the trick for live calls. Share your screen in Google Meet or Zoom, and the floating camera is part of what you share. Your audience sees your slides and you, with effects, without any virtual camera driver.
It also pops out on its own when you switch tabs, so you don't lose it when you go to your slides.
Meet-style controls
The controls now sit in a bottom bar like a video call: mic, camera, effects, record, pop out, end. Effects open in a side panel, so you can change them while recording without covering your face.
Three ways to use it
Product demo. Put your app on screen, turn on Hand Tracking (HUD) and a light background effect. Point at a button with the Light Painter effect to circle it in glowing ink, then make a fist to clear it. It works like a laser pointer you don't have to hold.
Presentation. Open your slides, click Pop Out, then share your screen in Meet. Add your name or the talk title in the text box at the bottom of the settings, and it shows up in the camera view. Raise a hand for Thunder Call when you get to the big number. People remember that slide.
Tutorial. Record Screen with your code editor and mic on. Keep the effects calm (one HUD effect is enough) so the focus stays on the code, and use your hands to point at what matters instead of waving the mouse around.
Tips
- Light from the front. Hand tracking is much more stable when your face and hands are lit.
- Test once before you record. The first time you pick an effect, its model downloads. Do that before you press record so there's no pause.
- Fewer effects for long recordings. Stacking six effects looks great for a 15 second clip, but on an older laptop it can heat up over a 20 minute tutorial.
- Share a tab, not the whole screen, if you want tab audio (like a video you're showing) in the recording.
How it runs
Everything runs in your browser. Hand, face and body tracking is MediaPipe running as WebAssembly. Effects are drawn on a canvas, the canvas is combined with your screen capture, and the result is recorded with the browser's MediaRecorder. Pop Out uses the Picture-in-Picture API. No server sees your video.
Try it
Open the playground, pick an effect, and hit Record Screen or Pop Out.
If you make a demo or tutorial with it, drop the link in the comments. I'd love to see what you build.
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.