Audio and Video Quality

The amount of control you have over the audio and video quality depends on the recorder being used:

  1. With the main recording client, you have granular control over the resolution, frame rate and other settings.
  2. With the legacy mobile recorder, the resolution, audio, and video quality depend on the mobile device and the settings on the device.

Audio and Video Quality In The Main Recording Client

With the main recording client, the audio and video quality depends on 3 factors:

  1. the audio/video quality settings for your embedded recorder
  2. the quality of the hardware/camera (affects max resolution, max frame rate, picture quality, and noise)
  3. the light available in the room (low light results in lower fps and higher noise).

Change the Resolution Using a Predefined Resolution

To easily change the desired resolution, the Pipe Platform offers 7 predefined audio/video quality profiles:

  1. 240p : 320x240px @ 30fps
  2. 360p : 640x360px @ 30 fps (default)
  3. 480p : 640x480px @ 30 fps
  4. 720p : 1280x720px @ 30 fps (HD)
  5. 1080p : 1920x1080px @ 30 fps (Full HD)
  6. 1440p : 2560x1440px @ 30 fps (2K)
  7. 2160p : 3840x2160px @ 30 fps (4K)

The profile you choose has a very high influence on the resolution of the resulting video stream.

To use one of the predefined quality profiles (240p, 360p, 480p, 720p, 1080p, 1440p or 2160p) just select the desired one when generating the embed code in the Pipe account dashboard:

Setting the quality of the recording in the options menu

All 7 profiles are available during the trial.

Accounts with paid subscriptions are limited based on the subscription plan:

  • Standard subscriptions have access to the 240p, 360p, and 480p resolution profiles.
  • Creator subscriptions additionally have access to the 720p resolution profile.
  • PRO subscriptions have access to all resolution profiles, up to 2160p (4K).

More information about the subscription plans is available on the Pipe pricing page.

The recording resolution is not affected by the recorder size on the web page. You can have a small recorder embedded on your web page in a sidebar that’s set up to record video at 1280x720 resolution.

Custom Resolutions

You can configure the video recording client to ask for a specific resolution, or fps by hosting your own .xml quality profile file or by using video constraints directly in the embed code (simpler and more powerful).

Support for Resolutions in Webcams and Browsers

Not all webcams support all resolutions.

Some webcams may return a stream in a resolution different from the one desired, especially if you request non-standard resolutions. The resolutions we’ve selected for the profiles above are fairly safe.

Browsers will impact the resolution as well.

For example, Firefox is more restrictive than Chrome in terms of supported resolution - at the time of this writing, Firefox on macOS supports only 640x480, 1280x720 and 1920x1080 when using the FaceTime HD Camera on a 2023 14inch MacBook Pro - while privacy oriented browsers like the Mullvad Browser will only support 640x480 to avoid fingerprinting.

Resolution Tester

To check what resolutions your webcam/device & browser support, visit our webcam resolution tester.

Desktop devices (PCs, Macs, laptops)

Video

The recording client will request the resolution and frame rate configured in the embed code (either through .xml quality profiles or by specifying the video constraints directly). If the camera or browser does not support it, a stream with the closest possible resolution will be returned (see above).

You can find out the resolutions supported by your browser & webcam combo with our camera resolution finder tool.

A framerate of 30fps is requested from the camera with all quality profiles but it depends on the camera if it can supply it. Older webcams in low-light situations will not be able to sustain this framerate, especially with high resolutions. If you want to request a different frame rate or don’t want to specify the frame rate at all see using your own quality profiles for more information.

Firefox encodes the video data using VP8 while Chrome, Edge 79+ and Safari will use H.264. The Pipe Platform will convert the VP8 video data from Firefox to H.264 for the final .mp4 file that gets pushed to our or your long term storage.

Audio

Audio will be recorded as mono or stereo Opus audio at 48 kHz. It will be converted to AAC by Pipe for the final .mp4 file. Stereo audio will only be recorded from capable devices (Logitech C920, Logitech C925e, MacBook PRO with 3 mics, etc) on newer browsers (Chrome 63+ and Firefox 55+) and Edge 79+. Safari will compress audio using AAC (1 channel).

At the time of testing: Firefox 117 and the latest versions of Chrome (tested with 116 & 117) will apply an auto gain filter (autoGainControl constraint) to the sound input.

By default, the Pipe recording client asks the browser to apply a noise suppression filter to the microphone input. The request/constraint is respected by Chrome, Firefox, and Edge. Safari (16.6) does not honor the request. If you’d like to turn it off, you can set the pipe-ns attribute or ns property to 0 in the embed code, as explained in working directly with the embed code.

If you’d like to specify audio constraints directly (for example to remove all audio processing) see the Setting Constraints Directly in the Embed Code section.

Chrome on Android

Chrome on Android will support various resolutions depending on the Chrome version, Android version, the camera used (front or back), the device orientation (landscape or portrait) and the camera quality. These resolutions are fairly safe to use and should be widely supported:

  • 160x120 (4:3)
  • 176x144 (4:3)
  • 320x240 (4:3)
  • 352x288 (4:3)
  • 640x360 (16:9)
  • 640x480 (4:3)
  • 800x600 (4:3)
  • 1280x720 (16:9)
  • 1600x1200 (4:3)
  • 1920x1080 (16:9)
  • 3840x2160 (16:9)*

*Some Android devices will support 4k only with the back camera.

We’ll be recording portrait video (e.g. 480x640) when the user holds the phone in portrait mode and landscape video (e.g. 640x480) otherwise.

Chrome on Android gives us mostly H.264 video and Opus audio in .webm files. Some older Android devices will use VP8 for encoding video especially when recording at high resolutions. The data is converted to H.264 video and AAC audio in .mp4 files on our platform.

Safari on iOS

See https://blog.addpipe.com/inline-recorder-on-ios-beta/.

Custom Audio and Video Quality Settings

There’s 2 ways to provide custom audio and video settings to the recording client:

  1. a custom .xml profile (allows you to control only the resolution and fps)
  2. new: specifying constraints directly gives you acess to all audio and video constraints

Using Your Own Quality Profile File

Pipe allows you to use your own audio/video quality profile in the recording client by linking directly to it, in the embed code, using the qualityurl parameter. This ability comes in handy if, for example, you want to record square videos.

Step 1: Create Your Own Quality Profile File and Host It

Here are the 7 quality profiles available through the Pipe account dashboard: 240p, 360p, 480p, 720p, 1080p, 1440p, and 2160p. Download one, make your changes, and upload it to your website.

Here’s every setting you can change in the profile and their default values:

SettingsRecording ClientDefault Value
video width and height✓-
optional: framerate*✓30

*If the framerate value or tag is invalid or missing in the .xml file, no framerate constraint will be included in our getUserMedia request for a video stream. This is useful if you’re looking to use the browser or webcam default fps for the requested resolution.

Embed Code v2.0 via HTML

Add the pipe-qualityurl attribute to the piperecorder tag:

<piperecorder id="custom-id" pipe-qualityurl="https://yourdomain.com/new_quality_profile.xml" pipe-width="640" pipe-height="390" pipe-qualityurl="avq/360p.xml" pipe-accounthash="ACCOUNT_HASH" pipe-eid="ENVIRONMENT_ID" pipe-mrt="600" pipe-avrec="1"></piperecorder>

Embed Code v2.0 via JavaScript

Replace the value of the existing qualityurl property in your JavaScript recorder configuration object. Here’s an example code:

var pipeParams = {size:{width:640,height:390}, qualityurl:"https://yourwebsite.com/new_quality_profile.xml", accountHash:"ACCOUNT_HASH", eid:"ENVIRONMENT_ID", mrt:600, avrec:1};

The pipeParams object will be passed as a parameter to PipeSDK.insert().

Embed Code v1.0

Replace the value of the qualityurl parameter in your flashvars configuration object. Here’s an example code:

var flashvars = {qualityurl: "https://yourwebsite.com/new_quality_profile.xml", accountHash:"ACCOUNT_HASH", eid:"ENVIRONMENT_ID", mrt:600, avrec:1};

Step 3: Allow Pipe to Load The .Xml File from Your Website

In case you are hosting the custom .xml audio-video quality profile file on a different domain than the one you are you are embedding the Pipe recording client in, you must enable CORS on the server on which you are hosting the custom .xml audio-video quality profile.

For example, on Apache, to add the CORS authorization header, you must add the following line in either the Directory, Location, Files or VirtualHost sections of your server config (usually located in a *.conf file, such as httpd.conf or apache.conf), or within a .htaccess file:

Header set Access-Control-Allow-Origin "https://SITE-WHERE-PIPE-IS-EMBEDDED.com"

For more details on how to configure CORS on other servers see https://enable-cors.org/server.html.

Setting Constraints Directly in the Embed Code

As an alternative to hosting and linking your own XML quality profile file, you can now pass audio constraints or video constraints directly in the embed code using the pipe-gumconstraints and pipe-gdmconstraints embed code options.

This approach is faster and gives you more control without the need to create, host, and configure cross-origin access for an external .xml profile file.

Announcement blog post: Custom getUserMedia and getDisplayMedia Constraints Now Supported.

Benefits of Using Direct Constraints

  • No need to host your own XML file or configure CORS for it.
  • Simpler maintenance: You can modify resolution, frame rate, and other settings right in the embed code.
  • Better access to media constraints: Browser APIs like getUserMedia() and getDisplayMedia() evolve over time. This approach lets you use new or experimental constraints as they become available.
  • Enables niche use cases, like requesting a specific aspect ratio (regardless of the resolution).

How XML Profiles Worked

Before constraints were supported, the recording client used XML quality profile files to load the desired video resolution and frame rate. These XML files only defined three video quality settings (width, height, fps) and were used to build a getUserMedia() constraints object. Audio settings were never available via these files.

On top of the above video settings, the recorder always added noiseSuppression:true to the constraints object sent to the recording client.

When using a custom constraints object, Pipe will send it as is to the getUserMedia function; it will not add or remove any constraints (except for device IDs when choosing specific devices). The resulting streams will depend on the custom constraint object defined by you, and the browser defaults for the others.

How to Pass Custom Constraints Through The Embed Code

You can pass custom constraints directly through the embed code, bypassing the need for a separate XML quality profile file.

Use the pipe-gumconstraints attribute to pass constraints for getUserMedia() through the HTML embed code:

<!-- HTML Embed Code -->
<piperecorder id="myRecorder"
  pipe-gumconstraints="{video:{width:1920,height:1080,frameRate:30}}">
</piperecorder>

For screen recording (getDisplayMedia()), use pipe-gdmconstraints:

<!-- HTML Embed Code -->
<piperecorder id="myRecorder"
  pipe-gdmconstraints="{video:true,audio:true,preferCurrentTab:true}">
</piperecorder>

You can also set custom constraints using the JS embed code:

// JS Embed Code
var pipeParams = {
  // ...
  gumconstraints: "{video:{width:640,height:480,frameRate:30}}",
  gdmconstraints: "{video:true,audio:true,monitorTypeSurfaces:'exclude'}" // Excludes screen surfaces on Chrome and other browsers
};
PipeSDK.insert("myRecorder", pipeParams);

Use Cases Beyond Video Resolution

In addition to controlling the video resolution, being able to access all constraints supported by browsers, allows more specialized recording setups:

Enforce a Specific Aspect Ratio

You can request a specific aspect ratio, without asking for a specific resolution:

{video:{aspectRatio:1.777},audio:true} // 16:9 aspect ratio
Default to Front (Face) Camera

On mobile devices you can request the front camera to be used

{video:{facingMode:"user"},audio:true} // Default to facecam on mobile
Disable All Audio Processing

This one’s for for recording music or instruments.

{
  audio: {
    echoCancellation: false,
    noiseSuppression: false,
    autoGainControl: false
  }
}
Request Higher Frame Rate 
{video:{width:1280,height:720,frameRate:{ideal:60}}}

Yuu’ll find a list of possible constraints in the MDN getUserMedia() Documentation and in our own blog posts:

Update Constraints Dynamically via JS API

You can also use JS API Methods to update the custom constraints:

updateGUMConstraints(newConstraints)

Updates constraints for future getUserMedia() calls. Example usage:

myRecorderObject.updateGUMConstraints("{video:{width:1280,height:720,frameRate:60}}");
updateGDMConstraints(newConstraints)

Updates constraints for future getDisplayMedia() calls. Example usage:

myRecorderObject.updateGDMConstraints("{video:true,audio:true,selfBrowserSurface:'exclude'}");
Last Modified on September 17, 2025
← Allowing File Uploads from the recording client
Embed Code Options →