SharedArrayBuffer (SAB) is a web API that is available in all major browsers that enables shared memory in JavaScript. Shared memory increases performance, speed, and efficiency in your program which allows developers to build more advanced feature sets.
Zoom uses SharedArrayBuffer to power advanced features and increase performance when implementing existing features using WebAssemby. It's not required for the SDK to function and it's not required when using WebRTC.
How to enable SharedArrayBuffer
You can enable SharedArrayBuffer on your webpage using Cross-Origin Isolation, Credentialless Headers, Serviceworkers,
Chrome's Origin Trials, or Document-Isolation-Policy (Chrome or Edge only). Here's a quick comparison.
| Policy | Cross-Origin Isolation | Credentialless Headers | Serviceworkers | Chrome's Origin Trials* | Document-Isolation-Policy** |
|---|---|---|---|---|---|
| Solution type | Permanent | Permanent | Permanent | Temporary | Permanent |
| Requires custom server headers | Yes | Yes | No | No | Yes |
*Chrome's Origin Trials work for Chromium based browsers like Chrome and Edge. However, you must renew the Chrome Origin Trial every three (3) months. They'll eventually be deprecated. See the link for details.
**Choose the Document-Isolation-Policy option for Chromium based desktop browsers (Chrome/Edge v137+) if your site needs to embed third-party content like iFrames, videos, or payment gateways.
Implementation guidelines
Click a tab for implementation details.
To implement, add these headers to your server:
Cross-Origin-Embedder-Policy: require-corpCross-Origin-Opener-Policy: same-origin
See A guide to enable cross-origin isolation for details.
Can't be enabled on hosting platforms that do not allow custom headers.
To implement, add these headers to your server:
Cross-Origin-Embedder-Policy: credentiallessCross-Origin-Opener-Policy: same-origin
See Load cross-origin resources without CORP headers using COEP: credentialless for details.
Can't be enabled on hosting platforms that do not allow custom headers.
To implement, follow the coi-serviceworker guide.
Can be enabled on hosting platforms that do not allow custom headers.
This works for Chromium based browsers like Chrome and Edge. To implement, register for the SharedArrayBuffers in non-isolated pages on Desktop platforms origin trial and add a meta tag with your token to your webpage:
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE" />
This is a temporary solution as you must renew the Chrome Origin Trial every three (3) months and it will eventually be deprecated. Can be enabled on hosting platforms that do not allow custom headers.
To implement add these headers to your server:
Document-Isolation-Policy: isolate-and-require-corporDocument-Isolation-Policy: isolate-and-credentialless
Works for Chromium based desktop browsers like Chrome and Edge starting in version 137. Allows for embedding third-party content like iFrames, videos, or payments. See Document Isolation Policy: Enable powerful web features with ease for details.
Can't be enabled on hosting platforms that do not allow custom headers.
Enable SharedArrayBuffer on managed cloud platforms
SharedArrayBuffer is implemented on the server level so the server sends the headers to the browser. Because of this, implementation may vary based on cloud providers or server environments. As such, please refer to the official documentation on how to modify server headers for some of the most popular cloud platforms in the following tabs.
Amazon Web Services allows for response header customization through their console, CloudFormation, CLI, and API. See Amazon's official documentation to learn more.
Google Cloud Platform's App Engine allows for response header customization by modifying the app.yaml file . See Google's official documentation to learn more.
DigitalOcean's App Platform allows for response header customization through their online console . See DigitalOcean's official documentation to learn more.
GitHub Pages currently does not allow for response header customization. As a workaround, however, you can use a service worker to modify headers on a client level. Zoom currently recommends the coi-serviceworker GitHub project.
Netlify allows for response header customization through a headers file, published alongside your project. This file can contain headers that, when present, will adjust the response headers that Netlify sends when a client makes a request. See Netlify's official documentation to learn more.
Vercel allows for response header customization through the next.config.js if you're deploying a Next.js project, or a vercel.json file if you're deploying a non-Next.js project. Additionally, they allow for response header customization for single Node.js serverless functions. See Vercel's official documentation to learn more.
Depending on the Microsoft Azure service, you can perform response header customization using in-app response headers or through your service configuration.
For applications deployed with the Azure App Service, you can forward custom response headers from the server. In this way, you can send SharedArrayBuffer headers from your application, for example, in ExpressJS , and forward them to the client.
To send response headers with Application Gateway or FrontDoor, you can rewrite response headers through your service configuration. See the following Microsoft documentation to learn more: Rewrite HTTP headers and URL with Application Gateway and Using Azure Front Door Standard/Premium with Cross-Origin Resource Sharing (CORS) .
Enable SharedArrayBuffer on the server
Aside from enabling SharedArrayBuffer using any of the above methods for cloud hosting platforms, if you're self-hosting or using a non-cloud web host that deploys Apache HTTP Server or nginx, then you may need to enable SharedArrayBuffer by modifying your web server's configuration file to respond to client requests with two headers:
Cross-Origin-Embedder-Policy(COEP)Cross-Origin-Opener-Policy(COOP)
For Apache HTTP Server the recommended method for managing headers is to modify the .htaccess file. To learn more about Apache HTTP Server's directives and how to set them, check out Mozilla's documentation page on the topic.
For nginx the recommended method for managing headers is to modify the nginx.conf file for global server configuration, or your virtual host's configuration file, if configured. We recommend using CORS on Nginx as a starting point.
Verify that SharedArrayBuffer is enabled
To verify that the changes were applied to your site, run the following JavaScript on your webpage:
typeof SharedArrayBuffer === 'function'; // returns true or false
or
crossOriginIsolated; // returns true or false
Additional resources
For more details on cross-origin isolation and SharedArrayBuffer, see the following links.
- Why you need "cross-origin isolated" for powerful features
- Making your website "cross-origin isolated" using COOP and COEP
- A guide to enable cross-origin isolation
- Load cross-origin resources without CORP headers using COEP: credentialless
- SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome 92
- COOP same-origin-allow-popups + COEP = crossOriginIsolated
- Anonymous iframes
- Iframe credentialless spec
- Iframe credentialless demo
- Document-Isolation-Policy explainer
From the developer blog
See the following blog post and YouTube video for more details.