Audio and Video Quality

The amount of control you have over the video quality depends on the recorder being used. With the main recording client, you have granular control over the resolution and frame rate. 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 video quality depends hugely on 3 factors, only one of which is under your control:

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

Control the desired resolution #

To control the 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. Not all webcams support all resolutions. Some webcams will return a stream in a different resolution than 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 resolutions and privacy oriented browsers like the Mullvad Browser will only support 640x480 to avoid fingerpriting. To check what resolutions your webcam/device & browser support visit our webcam resolution tester.

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:

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 have access additionally 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.

Desktop devices (PCs, Macs, laptops) #

Video #

The recording client will request the resolution and frame rate mentioned in the quality profile. If the camera or browser does not support it, a stream with the closest possible resolution will be returned. For example, 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.

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.

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/.

Using Your Own Quality Profile #

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 or higher resolution videos - like 4K - with the recording client.

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:

*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.

Step 2: Link to the New .Xml File in Your Pipe Embed #

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.