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.
On this page
- Overview
- Implementing Cross-Origin Isolation
- Implementing Credentialless Headers
- Implementing Chrome Origin Trials
- Cross-Origin Isolation Sample App
- How views look with and without
SharedArrayBuffer
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:
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.
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.



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.

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

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

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

Ribbon view

Screen sharing

SharedArrayBuffer not enabled
Speaker view

Screen sharing

Component view
SharedArrayBuffer enabled
Gallery view

Ribbon view

Screen sharing

SharedArrayBuffer not enabled
Speaker view

Screen sharing

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.