Web SDK gallery view and virtual background

In the Chrome and Edge browsers (chromium browsers), 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 and enable multiple video streams, which powers features like Gallery View and Virtual Backgrounds.

If SharedArrayBuffer is not enabled, only Self and Speaker View will be available in the Web Meeting SDK. In the Web Video SDK only two video streams will be available, self video and a single participant video stream. Without SharedArrayBuffer, Virtual Background will also not be available. See How views look with and without SharedArrayBuffer for details.

This does not limit the amount of participants who can be in the meeting, webinar, or session, just how many participant videos can be displayed on the page at a time.

Overview

As of Chrome 92, SharedArrayBuffer is only available if your web page is Cross-Origin Isolated, or if your web page uses Credentialless headers, or if you have registered for the SharedArrayBuffer Chrome Origin Trial.

Read about what Cross Origin Isolation is and why it is required for SharedArrayBuffer.

Implementation options

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

The three options are:

Here’s a quick comparison:

Cross-Origin Isolation	Credentialless Headers	Chrome Origin Trials
Harder to implement (1)	Easier to implement	Easiest to implement
Permanent solution	Permanent solution	Temporary solution (2)

There is an easier approach without touching the server side. You can implement the coi-serviceworker from Github or NPM to Cross-Origin Isolate your site on the client side.
The Chrome Origin Trial needs to be renewed every 3 months and only works until Chrome 106 which is slated for Oct 18, 2022.

iFrames are not supported. Zoom does not offer Developer Support to help you implement the Web SDKs in iFrames. iFrames also make Cross-Origin Isolation doubly complex. Use at your own risk.

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.

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

typeof SharedArrayBuffer === 'function'; // returns true or false

crossOriginIsolated; // returns true or false

If the value is true, SharedArrayBuffer is enabled, meaning Gallery and Ribbon View will be available in the Meeting SDK. In the Video SDK you will have the ability to render multiple video streams.

If the value is false, SharedArrayBuffer is not enabled, meaning only self and speaker view will be available in the Meeting SDK. In the Video SDK you will only have the ability to render self video and a single video stream.

Implementing Credentialless Headers

Alternatively, you can enable Cross-Origin Isolation by adding the following headers:

Cross-Origin-Embedder-Policy: credentialless
Cross-Origin-Opener-Policy: same-origin

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

typeof SharedArrayBuffer === 'function'; // returns true or false

crossOriginIsolated; // returns true or false

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'; // returns true or false

Cross-Origin Isolation Sample App

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.

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';
}

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';
}

Initialize your meeting to use the helper.html file.

ZoomMtg.init({
  helper: './helper.html', // default helper.html url path
});

Verify that the changes were successful

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

Open the Chrome Developer Tools. If you see the following screen, your changes did not correctly apply.

SharedArrayBuffer Browser Console Warning

In the Network tab in the Developer Tools, double-check that you applied the correct keywords to the headers in the meeting.html file.

Cross Origin Isolation Headers meeting.html file

Double-check that you applied the correct keywords to the headers in the helper.html file.

Cross Origin Isolation Headers 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.

How views look with and without `SharedArrayBuffer`

The following images show the differences in the user interfaces for the Web Meeting SDK Client view and Component view when SharedArrayBuffer is enabled or disabled. Note that you will not be able to offer Gallery view or Ribbon view when SharedArrayBuffer is not enabled.