Setting the file. One moment.
Skill 125 · Zoom Meeting SDK Web
Subchapter 125.9
concepts/sharedarraybuffer.mdMarkdown8 KBView on GitHub
SharedArrayBuffer (SAB) is a web API that enables shared memory in JavaScript, significantly improving performance for WebAssembly-based features. Zoom uses SharedArrayBuffer to power advanced features.
References
Component View Breakout RoomsAlso bundled
Browser SupportFeatures that REQUIRE SharedArrayBuffer:
Without SharedArrayBuffer:
Note: SharedArrayBuffer is NOT required for basic meeting functionality or WebRTC. The SDK will work without it, but with limited features.
SharedArrayBuffer requires Cross-Origin Isolation. You must configure your server to send specific HTTP headers.
| Method | Type | Custom Headers Required | Best For |
|---|---|---|---|
| Cross-Origin Isolation | Permanent | Yes | Production |
| Credentialless Headers | Permanent | Yes | Production with 3rd-party content |
| Document-Isolation-Policy | Permanent | Yes | Chrome/Edge 137+ with iframes |
| Service Workers | Permanent | No | GitHub Pages, static hosts |
| Chrome Origin Trials | Temporary | No | Testing only (renew every 3 months) |
Add these headers to ALL responses from your server:
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corpPros: Industry standard, works across all browsers Cons: May break third-party iframes/content without CORS headers
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: credentiallessPros: More compatible with third-party content Cons: Same browser support as Method 1
Document-Isolation-Policy: isolate-and-require-corp
# OR
Document-Isolation-Policy: isolate-and-credentiallessPros: Allows embedding third-party iframes, videos, payment gateways Cons: Chrome/Edge 137+ only (desktop)
For platforms that don’t allow custom headers (GitHub Pages):
<!-- Add before any other scripts -->
<script src="coi-serviceworker.js"></script>coi-serviceworker.js in your root directoryPros: Works on static hosting without header control Cons: Adds slight overhead, requires service worker support
<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE" />Pros: Quick testing without server changes Cons: Must renew every 3 months, will be deprecated
Next.js (next.config.js):
module.exports = {
async headers() {
return [
{
source: '/(.*)',
headers: [
{
key: 'Cross-Origin-Opener-Policy',
value: 'same-origin',
},
{
key: 'Cross-Origin-Embedder-Policy',
value: 'require-corp',
},
],
},
];
},
};Non-Next.js (vercel.json):
{
"headers": [
{
"source": "/(.*)",
"headers": [
{ "key": "Cross-Origin-Opener-Policy", "value": "same-origin" },
{ "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" }
]
}
]
}Create _headers in your publish directory:
/*
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corpUse CloudFront Response Headers Policy:
Cross-Origin-Opener-Policy: same-originCross-Origin-Embedder-Policy: require-corphandlers:
- url: /.*
static_files: index.html
upload: index.html
http_headers:
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corpserver {
location / {
add_header Cross-Origin-Opener-Policy "same-origin" always;
add_header Cross-Origin-Embedder-Policy "require-corp" always;
# ... other config
}
}<IfModule mod_headers.c>
Header set Cross-Origin-Opener-Policy "same-origin"
Header set Cross-Origin-Embedder-Policy "require-corp"
</IfModule>app.use((req, res, next) => {
res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
next();
});GitHub Pages doesn’t support custom headers. Use the Service Worker method:
<script src="coi-serviceworker.js"></script>// Check if SharedArrayBuffer is available
console.log('SharedArrayBuffer:', typeof SharedArrayBuffer === 'function');
// Check cross-origin isolation
console.log('Cross-Origin Isolated:', window.crossOriginIsolated);// Before initializing Zoom SDK
if (typeof SharedArrayBuffer !== 'function') {
console.warn('SharedArrayBuffer not available. HD features will be limited.');
console.warn('Enable COOP/COEP headers on your server.');
}
// Check isolation status
if (!window.crossOriginIsolated) {
console.warn('Page is not cross-origin isolated.');
}// Client View - use disableCORP for development without headers
ZoomMtg.init({
disableCORP: !window.crossOriginIsolated,
// ... other options
});Cause: Headers not configured or browser doesn’t support cross-origin isolation.
Fix:
Cause: require-corp blocks resources without CORS headers.
Fix:
credentialless instead of require-corpcrossorigin="anonymous" to external resources:
<img src="https://example.com/image.jpg" crossorigin="anonymous">Cause: Service worker not registered or not at root.
Fix:
coi-serviceworker.js is in the root directoryCause: Possibly Chrome < 92 or other browser limitations.
Fix:
| Browser | Version | Notes |
|---|---|---|
| Chrome | 92+ | Full support with COOP/COEP |
| Edge | 92+ | Full support with COOP/COEP |
| Firefox | 79+ | Full support with COOP/COEP |
| Safari | 15.2+ | Full support with COOP/COEP |
| iOS Safari | 15.2+ | Full support with COOP/COEP |
| Android Chrome | 92+ | Full support with COOP/COEP |