OneTaskBy Tim King · Updated
Picture-in-Picture Recorder
Screen and Webcam Corner Bubble With Microphone Audio, Saved as One WebM File
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Picture-in-Picture Recorder works
This picture-in-picture recorder captures your screen with your face in a webcam bubble and your voice on top, in one video file. Choose a corner, size and shape, press Record and pick what to share. Everything is combined and recorded in your browser, with nothing uploaded.
Walkthroughs, bug reports, lessons and sales demos all land better when the viewer can see the person talking. Dedicated apps do this with a floating camera window. This tool does the same job in a browser tab, with no account, no watermark and no time limit beyond your disk space.
How the picture-in-picture recorder works
The tool asks for two streams: a screen share from the browser's picker and your webcam, plus your microphone if you leave it on. Both play into hidden video elements. Thirty times a second it draws the screen onto a canvas, then draws a square crop from the centre of your webcam inside a circle or rounded square in the chosen corner. The webcam is mirrored, as people expect to see themselves.
The canvas becomes a video stream, your microphone track is added and MediaRecorder writes it all to a WebM file at 6 Mbit/s. The drawing is timed by a background worker rather than the page's animation loop, so it keeps going when you switch to the window you are recording.
Bubble size
The bubble is a share of the frame width, capped at 45% of its height.
| Setting | Share of width | On a 1920 × 1080 screen |
|---|---|---|
| Small | 15% | 288 px |
| Medium | 22% | 422 px |
| Large | 30% | 486 px (height cap) |
Screens larger than 1920 pixels wide are scaled down to 1920 to keep the file a sensible size.
Tips and pitfalls
Share a window, not the whole screen, if you have several monitors or notifications you would rather not show. The bubble is drawn on whatever you share.
Mind the corner. Most apps put menus top left and chat or toasts bottom right. Pick the corner your demo does not use, and check the preview before you start talking.
Frame yourself first. Use the camera framing guide or webcam test to check light and position. A lamp in front of you, not behind, makes the biggest difference.
System sound is not included. Only your microphone is recorded. For demo audio, record the tab sound separately or play it near the mic.
Stopping. Press Stop here or "Stop sharing" in the browser's bar. Either saves the file.
How to read the result
The stats show the shared source, the camera in use, the output size, the bubble size and corner and the microphone. When you stop, the status line shows the length and size of the saved file.
FAQ
Can I move the webcam bubble while recording?
No. The corner, size and shape are fixed when you press Record. Stop, change the settings and record again, or trim the clips together later. Fixing the layout keeps the drawing simple and the frame rate steady.
Why does the recording keep going when I switch windows?
The frames are timed by a background worker, which browsers do not slow down like a hidden tab's animation loop. That is what lets you record another app while this page sits behind it, without the video freezing.
Which browsers can record screen and webcam together?
Desktop Chrome, Edge, Brave, Opera and Firefox all support screen capture, webcam access and MediaRecorder. Safari can share the screen but its recording support is patchier. Phones and tablets cannot share their screen with a web page.
Is my screen recording uploaded anywhere?
No. Your screen, camera and microphone are combined and recorded inside your browser, and the file downloads straight to your computer. Nothing is sent to a server, so private work and documents stay on your device.
See also: all Video & Screen tools, Images, Audio, PDF, SVG, Simulations & Screensavers, Generative Art, Chart Makers, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.
Related tools
Screen Recorder Browser
Record your screen or webcam to a WebM file, locally.
Tab Audio Recorder
Capture the sound from a browser tab straight to an audio file.
Webcam Test
Check your camera works and see its real resolution and frame rate.
Camera Framing Guide
Frame your webcam shot with a thirds grid, safe areas and crop guides.
Video Trimmer
Cut a video down to the part between two timestamps.