Requirements and Supported Browsers

Pipe officially supports the following browsers.

Embed Code v2.0 #

💻 On Desktop Devices:

• Recording client
  • webcam recording: Chrome 66+, Firefox 76+, Edge 79+ and Safari 14.1+^Beta on secure contexts (https, localhost, file://, etc.)
  • screen + camera recording: Chrome 74+, Firefox 76+, Edge 79+ and Safari 14.1+^Beta on secure contexts (https, localhost, file://, etc.)

📱 On Mobile Devices:

• Recording client:
  • Chrome 66+ on secure contexts (https, localhost, file://, etc.) on Android
  • Safari on iOS/iPadOS 14.5+^Beta on secure contexts (https, localhost, file://, etc.)
• Legacy mobile recorder:
  • Chrome on Android version 4.4 and up
  • Safari on iOS 6 and up

Embed Code v1.0 #

💻 On Desktop Devices:

• Recording client
  • webcam recording: Chrome 63+, Firefox 52+ and Edge 79+ on some secure contexts (https, localhost, 127.0.0.1 and ::1)
  • screen recording: Chrome 72+, Firefox 66+ and Edge 79+ on some secure contexts (https, localhost, 127.0.0.1 and ::1)

📱 On Mobile Devices:

• Recording client:
  • Not supported, use the 2.0 embed code instead
• Legacy mobile recorder:
  • Chrome on Android version 4.4 and up
  • Safari on iOS 6 and up

Secure Contexts #

Many web APIs and features- including those used to access a device’s camera and microphone - are accessible only in a secure context. That’s why our recording client only works in secure contexts.

What Is a Secure Context? #

A web page is considered to be in a secure context if:

• it is served over https: the page is loaded via https://, ensuring data integrity and encryption.
• it is a local resource: origins such as http://localhost, http://127.0.0.1, file://, etc. are also deemed secure.

For a detailed explanation and list of secure contexts, refer to MDN’s article on Secure Contexts.

Testing on Insecure Contexts With Chrome #

Chrome has a flag that lets you force specific origins to be treated as secure: chrome://flags/#unsafely-treat-insecure-origin-as-secure . This can be used in development.

Recording Client Behaviour Over Insecure Contexts #

If the 2.0 recording client is embedded in a non-secure context, it will display the following message, blocking functionality:

Recording is only possible over secure contexts (https, localhost, file://, etc.)

Here’s how the recording client shows the message:

Permissions Policy #

Permissions Policy is a web security feature (via HTTP header or <iframe> attribute) that lets website developers control which powerful browser features (like camera, microphone, geolocation, fullscreen) are available in their own pages or embedded content. It gives developers control over what third-party pages are allowed to do when they are embedded in their sites.

Chromium based browsers (Chrome, Opera, Edge, etc.) support Permissions Policy. For up to date browser compatibility information, check out the MDN page.

How it works:

• HTTP Header: the Permissions-Policy response header is sent with the server’s response, defining rules for the entire page and its iframes.
• <iframe> Attribute: The allow attribute on an <iframe> tag can grant specific permissions to that embedded frame.

If incorrectly configured, the browser console will display errors related to invalid policy values or policy violations. This section details the recommended values and common errors.

Cross Origin Iframes #

Starting with Chrome 64, cross origin iframes block access to the camera and microphone by default.

To allow camera and microphone access in a cross origin iframe you need to add the allow="camera;microphone" attribute to your iframe:

<!--Allow camera and microphone access within the context of this iframe-->
<iframe src="https://cross.domain.com/fr.html" allow="camera;microphone"></iframe>

Permissions-Policy Header #

Some websites or hosting providers will have their own Permissions-Policy header configured that’s preventing camera and microphone access in the page.

Here’s a restrictive header we found in a client’s website:

Permissions-Policy: geolocation=(),sync-xhr=(),microphone=(),camera=(),payment=()

The above header will block access to the camera, microphone and synchronous XHR (which was used in older versions of pipe.js).

To ensure camera and microphone access is allowed on the page, the above Permissions-Policy HTTP header need to be updated as follows:

Permissions-Policy: geolocation=(),sync-xhr=(),microphone=(self),camera=(self),payment=()

Or, if cross origin iframes are also involved:

1. Update the Permissions-Policy header: Permissions-Policy: geolocation=(),sync-xhr=(),camera=(self "https://cross.origin.com"),microphone=(self "https://cross.origin.com"),payment=()
2. Add the allow="camera;microphone" attribute to the frame as shown above.

For more possible Permissions-Policy header values check out these two third party articles:

1. Permissions Policy on MDN
2. Control browser features with Permissions Policy

Common Permissions Policy Errors and Their Causes #

If the Permissions-Policy header is restrictive or incorrectly configured, you may encounter the following errors in the browser console:

Invalid Allowlist Item for Microphone or Camera #

When faced with an Invalid allowlist item error, it means your Permissions-Policy header value is invalid. In our case, we did not surrond the domain in double quotes.

Error message shown in the Chrome console:

Error with Permissions-Policy header: Invalid allowlist item(*.addpipe.com) for feature microphone. Allowlist item must be *, self or quoted url.

Permissions Policy Violation: Camera or Microphone not allowed #

When you see the following error messages shown in the browser console:

Permissions policy violation: microphone is not allowed in this document.
Permissions policy violation: camera is not allowed in this document.

It means:

• Access to the camera and/or microphone is denied by the Permissions-Policy header OR
• You’re trying to acess the camera and microphone in a cross origin iframe.

Solutions:

• Change your Permissions-Policy to allow camera and/or microphone access on the page (e.g. Permissions-Policy: camera=(self), microphone=(self))
• Add the allow="camera;microphone" attribute to the frame as shown above.

Permissions Policy Violation: Synchronous XHR is Disabled #

Older versions of pipe.js used synchronous XHR to load the required resources. This has been changed with the pipe.js released on May 26 2025. You can still get the error if you are using an older version.

Pipe log messages:

Synchronous XHR (sync-xhr) is denied by page Permissions-Policy or browser settings.

Error message shown in the browser console:

[Violation] Permissions policy violation: Synchronous requests are disabled by permissions policy.

Cause:

• The sync-xhr feature is denied by the Permissions-Policy header.
• An older version of pipe.js attempts to make a synchronous XMLHttpRequest and the request is now allowed by the Permissions-Policy header above.

Solutions:

• Change your Permissions-Policy to allow sync-xhr on the page (e.g. Permissions-Policy: sync-xhr=(self))
• Switch to the latest version of pipe.js

Error with Permissions-Policy header: Unrecognized origin #

When you see the following error message shown in the browser console:

Error with Permissions-Policy header: Unrecognized origin: 'website-bucket.s3.eu-west-1.amazonaws.com'.

It means you have not specified the full origin, the value needs to start with https://.