How to make a picture-in-picture tutorial video

A picture-in-picture tutorial shows your screen while a small view of you appears in a corner. It helps viewers follow your clicks and see who is explaining them. The tricky parts are keeping the camera bubble out of the way and making sure the recording includes the right sound.

You can record both views together with TooLab's Screen Recorder. It captures a screen, window, or browser tab, with options for microphone, sound, and camera. It is a recorder, not a timeline video editor, so plan the layout and audio before you start.

Record your tutorial

1. Open the Screen Recorder. Choose whether to capture a screen, a window, or a tab, then enable the camera and microphone if you want your face and voice in the video. Allow the browser to use each device when asked.
2. Prepare the screen you will demonstrate. Close private tabs and apps, hide notifications, and open the page or program at the point where the tutorial should begin. If viewers need to read small labels, increase the app's zoom or text size before recording.
3. Position the camera bubble in an empty corner. Keep it away from menus, buttons, text, and any part of the screen you need to explain. Check that your face is well lit and framed, and that the bubble does not cover important content.
4. Decide which sound to include. Use the microphone for narration. If you are demonstrating a video or app sound, enable the relevant screen or tab audio option when it is available. Speak a short test sentence and check the camera and sound before recording the full tutorial.
5. Start recording and work at a deliberate pace. Pause briefly before each important click, then explain what changed. Avoid moving the pointer over labels while you are describing them.
6. Stop when you finish and review the recording. Check the beginning and end, listen for clear narration, and confirm that the camera bubble did not hide a control. If something important is missing, correct the setup and record that part again.

Choose a layout that is easy to follow

Use a small camera bubble for detailed steps

A small bubble leaves more room for menus and controls. Place it in a corner that stays clear throughout the demonstration. If the interface changes from one side to another, use a different corner or move the bubble before you record that section.

Make the screen the focus

Keep the camera view large enough for viewers to recognize your expressions, but not so large that it blocks the instructions. For a software walkthrough, the screen usually needs more space than your face. If the screen has tiny text, enlarge the application rather than relying on viewers to zoom into the video.

Record one combined view or edit later

A camera bubble recorded over the screen is convenient when you want a ready-to-review tutorial. It is less flexible than separate video tracks: moving or resizing the bubble after recording may not be possible. If you need to change its position later, check whether your video editor supports separate screen and camera tracks, and capture them separately with a recording setup that provides those tracks.

Keep narration separate from screen sound in your plan

For a spoken software tutorial, microphone narration is usually the main audio. Include computer or tab audio only when viewers need to hear it, such as a sound effect or a video being demonstrated. Capturing unnecessary system sounds can make instructions harder to understand.

Fix common recording problems

1. Allow camera and microphone access. Click the site controls beside the browser address, set camera and microphone access to allow, then reload the page. On Windows 11, check Settings › Privacy & security › Camera and Settings › Privacy & security › Microphone. On macOS, check System Settings › Privacy & Security › Camera and System Settings › Privacy & Security › Microphone, and allow your browser.
2. Allow screen recording on a Mac. Open System Settings › Privacy & Security › Screen & System Audio Recording and allow the browser if it appears in the list. Quit and reopen the browser after changing access, then start the recording again.
3. Choose the intended microphone and camera. If you have a built-in camera and a headset or USB camera, select the one you intend to use in the recorder. Covering a laptop camera or muting a headset does not change which device the browser selected.
4. Capture the right screen or tab. When the browser shows its screen-sharing chooser, select the actual screen, window, or tab you want viewers to see. A tab capture shows that tab, not every window on your computer. If a chooser is missing or closes, reload the page and try again.
5. Check what audio is included. Make sure the microphone is enabled for narration and select tab or screen audio only if you need it. A screen recording can have clear narration but no app sound if that sound was not included in the capture.
6. Reduce competing apps and distractions. Close other programs using the camera or microphone, silence notifications, and avoid switching to private windows while recording. If the video stutters, close demanding apps and make a shorter test recording before trying again.

What a browser recorder can and cannot do

A browser recorder can capture content you choose to share, but it cannot silently record your whole computer. You must select a screen, window, or tab in the browser's sharing prompt. Some protected content may appear black, and a browser may not capture audio from every application or system source.

Screen Recorder is for capturing a tutorial, not adding cuts, captions, or transitions on a video timeline. Review the recording before sharing it, especially if it includes personal notifications or open tabs. Your recording stays on your device.