# SharedArrayBuffer

**URL:** <https://devforum.zoom.us/t/sharedarraybuffer/103783>\
**Category:** Meeting SDK\
**Created:** [February 13, 2024, 6:29pm UTC](https://devforum.zoom.us/t/sharedarraybuffer/103783 "2024-02-13T18:29:37Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![qwerty1234](https://avatars.discourse-cdn.com/v4/letter/q/3be4f8/32.png) [@qwerty1234](https://devforum.zoom.us/u/qwerty1234)\
**Post date:** [February 13, 2024, 6:29pm UTC](https://devforum.zoom.us/t/sharedarraybuffer/103783/1 "2024-02-13T18:29:37Z")

</div>

In my zoomsdk component view, gallery view, video are not showing so i enabled sharedArrayBuffer, after that its working fine but these headers are causing trouble in my websit, if i remove this i wont get the zoomgallery view user video etc.  
i followed this article to setup a servceworker to enable the sharedArrayBuffer by setting the headers

[https://developers.zoom.us/docs/meeting-sdk/web/sharedarraybuffer/](https://developers.zoom.us/docs/meeting-sdk/web/sharedarraybuffer/)

these are the headers that i am seeting from the serviceWorker

```auto
const newHeaders = new Headers(response.headers);
newHeaders.set("Cross-Origin-Embedder-Policy", "require-corp");
newHeaders.set("Cross-Origin-Opener-Policy", "same-origin");

```

Zoom meeting is working fine with gallery view etc…  
now in my entire website all the images, videos are not loading becuause of this headers  
i am getting this warinig message

```auto
resulted in a network error response: Cross-Origin-Resource-Policy prevented from serving the response to the client.

```

---

<div class="post-metadata">

**Author:** ![freelancer.nak](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/freelancer.nak/32/40968_2.png) [@freelancer.nak](https://devforum.zoom.us/u/freelancer.nak)\
**Post date:** [February 13, 2024, 9:27pm UTC](https://devforum.zoom.us/t/sharedarraybuffer/103783/2 "2024-02-13T21:27:54Z")

</div>

@qwerty1234 Hope you will be fine.

Here is the [session](https://youtu.be/mXEx2mn9wro) about how to enable crossOriginIsolation.

Thanks

---

<div class="post-metadata">

**Author:** ![qwerty1234](https://avatars.discourse-cdn.com/v4/letter/q/3be4f8/32.png) [@qwerty1234](https://devforum.zoom.us/u/qwerty1234)\
**Post date:** [February 14, 2024, 11:27am UTC](https://devforum.zoom.us/t/sharedarraybuffer/103783/3 "2024-02-14T11:27:29Z")

</div>

Dear @freelancer.nak,

I wanted to express my appreciation for the invaluable assistance your YouTube videos on ZoomSDK have provided. Your tutorials have been instrumental in navigating through the complexities of integrating ZoomSDK into our React application.

However, I’ve encountered a challenge recently after incorporating the coi-serviceworker in our React app to enable sharedArrayBuffer. Although the ZoomComponent view is operational, the resolution seems capped at 320p, resulting in a less than optimal user experience.

Moreover, I’ve observed that images fetched from our S3 repository are failing to load due to cross-origin-resource policies. This is posing a significant hurdle in delivering the content seamlessly to our users. Additionally, the ReactPlayer component, utilized for embedding YouTube videos on our website, is encountering similar issues, hindering the functionality of our platform.

The error message received is as follows:

```auto
The FetchEvent for "https://domain.com/image" resulted in a network error response: Cross-Origin-Resource-Policy prevented from serving the response to the client.

```

I would greatly appreciate any insights or guidance you could offer to resolve these challenges effectively. Your expertise would undoubtedly be immensely beneficial in overcoming these obstacles.

Thank you in advance for your time and support.

---

<div class="post-metadata">

**Author:** ![abhay.scaleteam](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/abhay.scaleteam/32/56810_2.png) [@abhay.scaleteam](https://devforum.zoom.us/u/abhay.scaleteam)\
**Post date:** [March 27, 2024, 12:12pm UTC](https://devforum.zoom.us/t/sharedarraybuffer/103783/4 "2024-03-27T12:12:48Z")

</div>

I am facing the same problem, images from s3 are failing to load and also it is affecting iframes.  
Can any one please help for the same ? I did this with service workers in my ReactJS app. Any Help will be appreciated.

Thanks

---

<div class="post-metadata">

**Author:** ![joao.brizolla](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/joao.brizolla/32/62916_2.png) [@joao.brizolla](https://devforum.zoom.us/u/joao.brizolla)\
**Post date:** [August 30, 2024, 11:17am UTC](https://devforum.zoom.us/t/sharedarraybuffer/103783/5 "2024-08-30T11:17:33Z")

</div>

I’m facing the same issue, i’ve used coi-serviceworker library, but it set the cors rule for every request, and that causes the problem with s3 links that are external.

EDIT: Found the solution

**file:**  **next.config.js**

```javascript
const nextConfig = {
  images: {
    remotePatterns: [
            {
        protocol: 'https',
        hostname: 'www.figma.com',
      },
      {
        protocol: 'https',
        hostname: 'youbucket.s3.amazonaws.com',
      },
//maybe you need to add the domain to your site
}
...others configurations
}

```

if u have protected routes, you should keep public paths listed also:

```auto
const publicRoutes = [
  '/login',
  '/_next/',
  '/api/',
  'logout',
  '/favicon.ico',
  '/images/',
]

export async function middleware(req: NextRequest) {
//.... CODE
    if (publicRoutes.some((prefix) => pathname.startsWith(prefix))) {
      return NextResponse.next()
    }
}

```

---

<div class="post-metadata">

**Author:** ![smithjohns002002](https://avatars.discourse-cdn.com/v4/letter/s/848f3c/32.png) [@smithjohns002002](https://devforum.zoom.us/u/smithjohns002002)\
**Post date:** [September 1, 2024, 2:52pm UTC](https://devforum.zoom.us/t/sharedarraybuffer/103783/6 "2024-09-01T14:52:09Z")

</div>

> [@qwerty1234](#):
>
> In my zoomsdk component view, gallery view, video are not showing so i enabled sharedArrayBuffer, after that its working fine but these headers are causing trouble in my websit, if i remove this i wont get the zoomgallery view user video etc.  
> i followed this article to setup a servceworker to enable the sharedArrayBuffer by setting the headers
> 
> [https://developers.zoom.us/docs/meeting-sdk/web/sharedarraybuffer/](https://developers.zoom.us/docs/meeting-sdk/web/sharedarraybuffer/)
> 
> these are the headers that i am seeting from the serviceWorker
> 
> ```auto
> const newHeaders = new Headers(response.headers);
> newHeaders.set("Cross-Origin-Embedder-Policy", "require-corp");
> newHeaders.set("Cross-Origin-Opener-Policy", "same-origin");
> 
> ```
> 
> Zoom meeting is working fine with gallery view etc…  
> now in my entire website all the images, videos are not loading becuause of this headers  
> i am getting this warinig message
> 
> ```auto
> resulted in a network error response: Cross-Origin-Resource-Policy prevented fr
> 
> ```

Apply the `Cross-Origin-Embedder-Policy` and `Cross-Origin-Opener-Policy` headers only on Zoom-specific pages to avoid breaking images and videos on the rest of your website, just like we do in data fetching for a [courier tracking website](https://carriagetracking.com). Ensure cross-origin resources use appropriate CORS headers or serve them from the same origin. Use the `crossorigin` attribute for cross-origin media.