Improve Performance in Chrome


In the Chrome browser, our Web SDKs use an API called SharedArrayBuffer to deliver a better experience to the end user, for example, the ability to send video faster. As of Chrome 92, SharedArrayBuffer is only available in Chrome if your web page is Cross-Origin Isolated, or if you have registered for the SharedArrayBuffer Chrome Origin Trial.

We highly recommend implementing one of these two options to improve performance for the Web Meeting SDK and Web Video SDK in Chrome.

The two options are:

  1. Cross-Origin Isolating your webpage
  2. Using Chrome’s Origin Trials

Here are the Pros and Cons:

Cross-Origin Isolation Chrome Origin Trials
Harder to implement Easier to implement
Permanent Temporary*

*Chrome Origin Trials need to be renewed about every 3 months and only works until Chrome 103

Implementing Cross-Origin Isolation

Add the following headers to cross-origin isolate your page:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

If you need to load cross-origin content, make sure to allow it via a Cross-Origin-Resource-Policy header or a CORS header.

See the Cross-origin isolation overview section in the SharedArrayBuffer Chrome Developer blog post for more details.

Implementing Chrome Origin Trials

The images below show how to register for the Chrome Origin Trial and where to find your token.

Add the following meta tag to your index.html or the page where you are using the Web SDK:

<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">

To verify that the changes were applied to your site, enter the following in your browser console:

typeof SharedArrayBuffer ==='function'

If the value is true, it’s correct.

See the Delaying the Desktop Chrome change section in the SharedArrayBuffer Chrome Developer blog post for more details.

Cross-Origin Isolation Sample App Example

We have included a helper.html file in the sample app to act as a proxy between the meeting.html page and the Zoom registration page. See the workflow diagram below for details.

Enable the cross origin headers for your site. See the web.dev article Making your website “cross-origin isolated” using COOP and COEP for more details.

For example, the steps below show how to configure your web server for cross-origin isolation using the Web SDK sample app and Nginx.

  1. Using Nginx, navigate to the Web SDK meeting.html file and add the COEP and COOP headers with the keyword require-corp for COEP and same-origin for COOP.
location /meeting.html {
	add_header 'cross-origin-resource-policy' '*';
	add_header 'Cross-Origin-Embedder-Policy' 'require-corp';
	add_header 'Cross-Origin-Opener-Policy' 'same-origin';
}
  1. Navigate to the Web SDK helper.html file and add the COEP and COOP headers and use the keyword unsafe-none in both headers.
location /helper.html {
	add_header 'Cross-Origin-Embedder-Policy' 'unsafe-none';
	add_header 'Cross-Origin-Opener-Policy' 'unsafe-none';
}
  1. Initialize your meeting to use the helper.html file.
ZoomMtg.init({
      disableCORP: !window.crossOriginIsolated, // default true
      helper: './helper.html' // default helper.html url path
      });

Verify that the changes were successful

To verify your changes successfully were applied, follow these steps.

  1. Open the Chrome Developer Tools. If you see the following screen, your changes did not correctly apply.
  1. In the Network tab in the Developer Tools, double-check that you applied the correct keywords to the headers in the meeting.html file.
  1. Double-check that you applied the correct keywords to the headers in the helper.html file.

Test cross-origin isolation with our demo

To run the demo, enter:

npm run start

See the Zoom Web SDK Sample App for details.

To learn more

All assets and webpages must have cross-origin isolation headers to use SharedArrayBuffers without the origin trial. The way you enable these headers depends on your web server backend set-up and architecture. See the web.dev article, A guide to enable cross-origin isolation, for more information.