SharedArrayBuffer

Meeting SDK
1

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/

these are the headers that i am seeting from the serviceWorker

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

resulted in a network error response: Cross-Origin-Resource-Policy prevented from serving the response to the client.
1 Like
2

@qwerty1234 Hope you will be fine.

Here is the session about how to enable crossOriginIsolation.

Thanks

3

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:

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.

4

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

5

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

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:

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()
    }
}
6

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. Ensure cross-origin resources use appropriate CORS headers or serve them from the same origin. Use the crossorigin attribute for cross-origin media.