How to Record a Video of a Browser Tab

Sunil Kowlgi -

A Chrome extension screen recorder can record the video and audio of a webpage open in a browser tab. This is a unique advantage of browser extensions over non-extension screen recording tools.

To make a nice video of a webpage, you can record it in fullscreen. But there are a few tricks to record in fullscreen, which we cover in this article.

Use cases for browser tab recording

A few example use cases for recording a browser tab in fullscreen:

  1. Record presentations with only the slides visible in the video
  2. Record  software demos on a browser tab
  3. Record online videos and webcasts
  4. Record browser-based conference calls on Zoom, Jitsi, etc.

Requirements for fullscreen recording

To record a webpage in fullscreen, a screen recorder must meet two requirements:

  1. Record a fullscreen webpage with webpage content and nothing more.
  2. Launch the screen recorder without needing to exit fullscreen.

There are a couple problems in meeting the above requirements.

Problem

  1. While recording, screen recorders display a control panel on the screen. A control panel has buttons to pause/resume, discard and stop recording. To make a clean recording of a webpage in fullscreen, the control panel should not appear in the recording.
  1. To launch a Chrome extension you have to click its extension icon. To click the icon, a browser window must exit fullscreen. Altogether, we must carry out these steps (see video below):
  2. exit fullscreen
  3. launch the screen recorder extension and start recording
  4. go back to fullscreen

The video recording will show step #3, which is undesirable. But, we can remove the part where it appears through video editing. While video editing is not hard to do, it requires effort.

Solution

The Outklip Chrome extension for screen recording solves these problems.

  1. You can disable the control panel by changing screen recorder settings.
  2. Use keyboard shortcuts to avoid exiting fullscreen to click the extension icon.

Details in the steps below.

1. Change Outklip Chrome extension settings

Click the Outklip Chrome extension icon to open the dialog shown below. Update the following settings.

  1. Disable profile photo in place of camera — to prevent the avatar from appearing on the webpage.
  2. Disable control panel — this will prevent the control panel from appearing on the webpage.
  3. (Optional) Set countdown to 0 seconds — if you wish to avoid a countdown before recording.

2. Keyboard shortcuts

Outklip supports keyboard shortcuts. With shortcuts you can launch the Chrome extension, start and stop recording without exiting fullscreen.

To set up keyboard shortcuts for Outklip, open chrome://extensions/shortcuts in a browser tab. Set up shortcuts for the following operations (shown in the picture below).

  1. Activate the Outklip Chrome extension
  2. Start recording
  3. Stop recording

If a shortcut conflicts with an existing Chrome shortcut, it will not work. So, test a shortcut to make sure it works. If it doesn’t work, try different shortcuts till you find one that works.

3. Create a recording

These are the steps to record a webpage in fullscreen.

  1. Open the webpage in fullscreen.
  2. Use the keyboard shortcut to activate the extension.
  3. On the extension dialog, select Browser Tab.
  4. Use the keyboard shortcut to start recording. This will start recording the webpage.
  5. To stop recording, use the corresponding keyboard shortcut. The recorded video will be ready to preview on a new tab.

Video demo

With these simple steps you can make a pristine recording of a webpage in fullscreen, without needing further video editing.