Video SDK Type and Version
Video SDK 1.10.8 for Web
Description
I am unable to render more than 4 videos in my Chrome (123.0.6312.106) browser.
It works fine for Firefox 124.0.2
I have enabled SAB like the below in my SvelteKit server
response.headers.set('Cross-Origin-Embedder-Policy', 'require-corp');
response.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
SAB Verification:
self.crossOriginIsolated is true in the console
Still, I am unable to subscribe to more than 4 videos. I have also set enforceMultipleVideos: false.
Error?
subscribe video counts greater than maximum size (4)
Troubleshooting Routes
Referencing sample app (GitHub - zoom/videosdk-web-sample: Zoom Video SDK web sample) ,
I am using the same headers method for enabling SAB. And using the same canvas to render all videos. I don’t see what am I missing here.
How To Reproduce
Windows, Chrome 123.0.6312.106
- Enable SAB like this
export async function handle({ event, resolve }) {
const cookieString = event.request.headers.get('cookie');
const user = await getAPIClient(fetch).getUser(cookieString);
event.locals = { user, token: getTokenFromCookie(cookieString) };
if (!canAccessEndpoint(user, event.url.pathname)) {
error(403, 'Unauthorized access for server endpoint');
}
const response = await resolve(event);
setCMIdCookie(event, response);
response.headers.set('Cross-Origin-Embedder-Policy', 'require-corp');
response.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
return response;
}
- Create a canvas to paint all videos
<canvas id="participant-videos-canvas" width="1692" height="1285"></canvas>
<style>
#participant-videos-canvas {
width: 100%;
height: auto;
}
</style>
- Init zoom using this function
async init() {
await this.client.init('en-US', 'Global', { patchJsMedia: true, enforceMultipleVideos: false });
}
- Render all videos on an event
attachEventListeners() {
this.client.on('peer-video-state-change', async () => {
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
await sleep(5000); // Sleep for 5 seconds
const participants = this.client.getAllUser();
const layout = getVideoLayout(1692, 1285, participants.length);
layout.forEach((cell, index) => {
this.stream.renderVideo(
document.querySelector('#participant-videos-canvas'),
participants[index].userId,
cell.width,
cell.height,
cell.x,
cell.y,
cell.quality
);
});
});
- Error on console “subscribe video counts greater than maximum size (4)”