Web SDK gallery view


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.

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. See How views look with and without SharedArrayBuffer for details.

On this page

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.

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:

  1. Cross-Origin Isolation
  2. Credentialless Headers
  3. Using Chrome’s Origin Trials

Here’s a quick comparison:

Cross-Origin IsolationCredentialless HeadersChrome Origin Trials
Harder to implement (1)Easier to implementEasiest to implement
Permanent solutionPermanent solutionTemporary solution (2)

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

or

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

or

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 Chrome Origin Trials

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

Activate Chrome Origin TrialRegister for Chrome Origin TrialCopy Origin Trial 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

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.

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.

Sample App Cross-Origin Isolation

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({
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.
SharedArrayBuffer Browser Console Warning
  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.
Cross Origin Isolation Headers meeting.html file
  1. 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.

Client view

SharedArrayBuffer enabled

Gallery View with SharedArrayBuffer

Ribbon view

Ribbon View with SharedArrayBuffer

Screen sharing

Screenshare with SharedArrayBuffer

SharedArrayBuffer not enabled

Speaker view

Speaker View without SharedArrayBuffer

Screen sharing

Screenshare without SharedArrayBuffer

Component view

SharedArrayBuffer enabled

Gallery View with SharedArrayBuffer

Ribbon view

Ribbon View with SharedArrayBuffer

Screen sharing

Screenshare with SharedArrayBuffer

SharedArrayBuffer not enabled

Speaker view

Speaker View without SharedArrayBuffer

Screen sharing

Screenshare without SharedArrayBuffer

Need help?

If you're looking for help, try Developer Support or our Developer Forum. Priority support is also available with Premier Developer Support plans.