Screen Recording

Intro #

Our recording client supports screen recording on modern deskop browsers. Together with the screen, it can also capture the microphone and overlay the camera stream. Recording the system or browser tab sounds is also possible with some browsers.

Requirements #

Screen recording is supported on all major desktop browsers.

We always test against recent versions of Chrome, Firefox, and Safari, but the feature should also work on any Chromium-based browsers like Microsoft Edge or Brave.

Screen recording is not supported on mobile browsers. The necessary API has not yet been implemented in mobile browsers.

The user will need a microphone or other audio input source to record their screen with our recording client.

Because of the large files it creates, the screen recording feature is only available during the trial and for accounts with the PRO subscription. You can sign up for a free 14 days trial account here.

Feature Support #

Some features are only supported by some browsers and operating systems. Here’s a recent comparison:

On Chrome (and Chromium based browsers) you can record the screen together with the system or tab sounds. The system sounds can be captured only on Windows and ChromeOS when sharing your entire screen. For the system/tab sound to be mixed with the microphone input you need to be using the now standard 2.0 embed code to embed the recording client in your web site or web app.

On Safari and Firefox on macOS, you can now share multiple windows using the macOS built-in private window picker.

The screen recording feature can be easily enabled for your embedded recording clients (see below).

How to Create a Screen Recording Capable Recorder #

From the Dashboard #

Follow these steps to create a screen recording capable recording widget and embed it into your website:

1. Sign in to your Pipe Account Dashboard at https://dashboard.addpipe.com
2. Go to the Embed Recorder page
3. On the left side, in the Options panel, select Screen + Camera in the Recorder Type drop-down
4. Click the green Generate Embed Codes button
5. Copy and paste the newly generated code into your website

From Code #

If you have an existing embed code, follow these instructions to enable the screen recording feature:

Embed Code v2.0 via HTML

Add the pipe-srec="1" attribute to the piperecorder tag.

Embed Code v2.0 via JavaScript

Add the srec property to your custom JavaScript object and give it a value of 1: srec:1 Your custom object will be passed as a parameter to PipeSDK.insert().

Embed Code v1.0

Add the srec property to the flashvars object and set it to 1 like so:

Recording the Screen, Microphone #

When screen recording is enabled, the Pipe Recording Client will show a [Record Screen] button on the initial screen.

In the example below, screen recording, recording from the webcam and uploading existing files are all enabled:

Once [Record Screen] is clicked the user will 1st be prompted to allow microphone access. The user must allow microphone access to continue to screen recording. If no microphone is found, the “Permission was denied. Could not get screen stream” error will be shown.

After microphone access is granted, the user will be presented with a new button labeled “Select screen for capture”. Clicking it will bring up the browser based dialogue for choosing the screen, window or tab to share. Chrome, Edge and other Chromium based browsers like Brave will also offer the option to share the system/tab audio at this time. Sharing the system audio is only possible on Windows. The user will be prompted to choose the surface to share every time. The option cannot be persisted for reuse. This is a security feature implemented in the browsers.

Recording the Screen, Microphone and System Sounds #

On Windows, with Edge, Chrome, or other Chromium-based browsers like Brave, it is possible to capture the system sounds when the user shares/captures their entire screen.

The Pipe Recording Client, will grab the system audio from the screen sharing stream, mix it with the microphone input and produce a screen recording with one audio track containing both the microphone and system sounds.

Recording the Screen, Camera and Microphone #

A recent update made it possible to record the screen and camera at the same time.

To start recording both the camera and the screen, the user can click on the “Record Camera” rectangle positioned in the bottom-right corner of the Pipe recording client or toggle the “Record Camera” option from the camera device selector menu. Both methods are illustrated in the following images below:

The camera overlay can be resized and moved around while actively recording and the user can enable video effects (background blurring or solid color background).

The initial webcam stream resolution will respect the video resolution settings provided in your embed code. However, when drawn over the screen stream, the webcam stream is initially scaled down to 16% of the shared surface’s width (window, screen, browser tab), while ensuring a minimum width of 100 pixels. Users can freely resize and reposition the webcam overlay at any time.

Camera Video Effects #

Video effects can also be added to the camera feed. These include:

• Background Blurring

  Enabling this feature applies a real-time background blurring effect to the camera feed. It’s important to note that this effect must be activated through the embed code options first. Learn how to enable the Background Blurring effect.

  

• Solid Color Background

  Enabling this effect will introduce a solid color background to the camera feed. You can choose from a preset selection of four colors or opt for a custom color using the color picker tool.

  

Custom Constraints #

Recently we introduced the ability to specify custom getDisplayMedia() constraints. This gives you more control over how screen sharing behaves in browsers that support these constraints. For example, you can:

• Prevent the user from sharing his or her entire screen using the monitorTypeSurfaces constraint;
• Force the user to share the current tab: usign the preferCurrentTab constraint;
• Disable the ability to share system audio: using the systemAudio constraint;

For a full list of constraints, check out the MDN documentation. Some of these are also covered in depth in Privacy-preserving screen sharing controls and our own Screen Sharing a Single Tab With getViewportMedia or getDisplayMedia.

To play around with these constraints check out our getDisplayMedia demo.

Resolutions #

The actual resolution of your screen recording will vary depending on what you’re capturing (the entire screen, a window, or a browser tab), and on high-DPI (Retina) displays, it may also depend on your display settings. Below are some common scenarios and how resolutions behave in these scenarios.

Recording Fullscreen on High-DPI (Retina) Displays #

macOS #

On macOS, when capturing the entire screen:

• with Chrome and Firefox, the recording resolution matches the screen’s native pixel resolution, not the scaled resolution shown in System Settings;
• with Safari, the recording resolution matches the scaled resolution shown in System Settings.

For example, if your 14-inch MacBook PRO’s Display resolution is set to “Default” (1512x982), and you record the entire screen, Chrome and Firefox will produce a 3024x1964 video while Safari will produce a 1512x982 video.

Windows #

On Windows, the screen recording resolution matches the screen’s native pixel resolution, regardless of the browser.

Capturing a Window That Changes Size Mid-Recording #

When capturing a specific window, and that window is resized during the recording session:

• The recording will maintain the initial resolution, based on the windows’ size at the moment recording starts.
• If the window is later resized (made smaller or larger), the content will be scaled (stretched or compressed) to fit the initial resolution.
• This can result in visible distortion or blurriness in the recorded video when the aspect ratio or dimensions change during capture.

Adding Windows to a Shared Canvas on macOS #

When recording on macOS and additional windows are shared using the new system-level screen sharing user interface:

• The recording will maintain the initial resolution, based on the window’s size at the moment the recording starts.
• Any new windows added to the shared view will be displayed within the same fixed canvas size.
• A black background will fill the remaining space as needed, and all visible windows will appear within that canvas, without resizing the overall video resolution.

Screen Recording on macOS #

It is possible to record your screen on macOS using just a modern browser like Safari, Chrome or Firefox and the Pipe Recording Client.

Up to macOS Monterey 12 browsers were only able to record the entire screen. Safari prompted you to Allow it to “observe your screen”.

Starting with macOS Ventura 13, Apple has introduced a new, OS-level, screen sharing UI. It changed how macOS handles screen capture requests from browsers, putting you in control and reducing the chance of screen sharing stuff you didn’t mean to. But it was only available in Safari and FaceTime.

With this new UI, instead of an app getting permission to record everything on your screen, you can now choose to share only a specific window or multiple windows directly from the OS-level screen sharing UI, or Screen Sharing Picker as Apple calls it.

In macOS Sonoma 14 the new screen capture API and UI (ScreenCaptureKit and SCContentSharingPicker) became available to other apps. Firefox eventually switched to it starting with Firefox 132.

In macOS Sequoia 15 the old screen capture APIs were deprecated and a new warning message started being shown for apps that don’t use the new screen sharing APIs and UI.

Requesting To Bypass the System Private Window Picker #

Starting with macOS Sequoia 15, if an app is trying to record your screen without using the new privacy focused API/UI, the user will be prompted by the warning: [APP] is requesting to bypass the system private window picker.

This happens because Apple deprecated older screen sharing API in macOS Sequoia 15.

So when using the Pipe Recording Client to record the screen from browsers other than Safari or Firefox 132+, you will be prompted by this warning, which is normal and expected.

macOS Screen Recording Permissions #

Across macOS versions, browsers and apps other than Safari and FaceTime will have to get an OS level permission to record the screen. Here’s how the prompt looks:

After granting permission, the user will have to restart the browser. The user only has to do this once per browser/app.

On macOS Sequoia and Sonoma you will find the list of apps which have been granted permission under System Settings > Privacy & Security > Screen & System Audio Recording .

Screen Recording in Chrome #

Chrome and Chromium-based browsers like Microsoft Edge are the best browsers to use when it comes to browser-powered screen sharing. Here’s why:

1. It’s the only browser that allows you to share a browser tab (and it does it without OS level permissions). Other browsers will only allow you to share an application window, or the entire screen;
2. Chrome presents a live thumbnail preview of each available surface, making it easier to choose what you want to share;
3. Chrome allows you to share the tab audio and, on Windows and ChromeOS, the system audio;
4. Chrome makes it very clear you’re currently sharing a surface (tab, window or screen);
5. Chrome also ships with a set of privacy preserving controls for screen sharing.

macOS Permissions #

On macOS, recording a browser tab in Chrome does not require macOS-level permissions. Sharing an application window or the entire screen will require screen recording permissions under System Settings > Privacy & Security > Screen & System Audio Recording.

Sharing Tab and System Audio #

Capturing system and tab audio makes sense when recording your screen for webinars, lessons, tech support, qualitative research, etc.. It does not make sense when the captured audio video is broadcasted in an online call, back to the same people that generated the audio.

Chrome supports capturing tab audio. When sharing a browser tab, users have acess to a checkbox labeled “Also share tab audio”. It is enabled by default.

On Chrome (and Chromium based browsers) you can record the screen together with the system or tab sounds. The system sounds can be captured only on Windows and ChromeOS when sharing your entire screen.

Screen Sharing Indicators #

When a Chrome tab is being shared, there’s a screen sharing ribbon shown on all tabs, which allows you to switch to the shared tab, share the current tab instead, or stop sharing altogether. Also, a distinct screen recording icon appears on shared tab menu item, which acts as a visual indicator to the user (which tab is currently shared).

When a window or the entire scren are being shared, Chrome will show a small OS level overlay.

Other Privacy Preserving Features #

With Chrome, you can set up a screen recorder that pre-selects the display surface and/or excludes the “Entire Screen” options. Chrome also excludes the current tab from the list of tabs offered to the user to prevent the “hall of mirrors” effect and allows one to easily switch the shared tab. All these controls will be available soon, directly in the recording client, once we roll out the ability to specify the getDisplayMedia constraints. You can read more about these controls in the Privacy-preserving screen sharing controls article.

Articles #

We’ve written quite a bit on the topic:

• 2018 Standards Compliant Screen Capture in Chrome 70 (behind a flag)
• 2019 Standards Compliant Screen Capture in Chrome 72
• 2019 product update Screen Recording In Chrome and Firefox Without Extensions
• 2019 product update: Screen Recording With System Sounds In Chrome
• 2024 product update: Recording The Webcam And The Screen At The Same Time
• 2025 Screen Sharing Got Smarter (and More Private) on macOS: Understanding the System Private Window Picker