Zoom Video SDK Web版Chrome下无法渲染4路以上视频（已启用SAB）

环境信息 #

• Zoom Video SDK版本：1.10.8（Web）
• Chrome版本：123.0.6312.106
• Firefox版本：124.0.2
• 开发框架：SvelteKit

已完成配置 #

1. SharedArrayBuffer（SAB）启用：在SvelteKit的handle中间件中设置响应头：

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;
}

• 验证：控制台执行self.crossOriginIsolated返回true

2. Zoom客户端初始化：明确设置enforceMultipleVideos: false以解除4路视频限制：

async init() {
    await this.client.init('en-US', 'Global', { patchJsMedia: true, enforceMultipleVideos: false });
}

问题现象 #

• Chrome中尝试渲染超过4路视频时，控制台抛出错误：subscribe video counts greater than maximum size (4)
• 相同配置下，Firefox可正常渲染多路视频

重现步骤 #

1. 按上述SvelteKit配置启用SAB
2. 创建视频渲染用canvas：

<canvas id="participant-videos-canvas" width="1692" height="1285"></canvas>

<style>
    #participant-videos-canvas {
        width: 100%;
        height: auto;
    }
</style>

3. 初始化Zoom客户端（已配置enforceMultipleVideos: false）
4. 通过peer-video-state-change事件批量渲染视频：

attachEventListeners() {
    this.client.on('peer-video-state-change', async () => {
        function sleep(ms) {
            return new Promise((resolve) => setTimeout(resolve, ms));
        }

        await sleep(5000); // 等待5秒确保视频流就绪

        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
            );
        });
    });
}

5. 触发事件后，Chrome控制台出现上述报错

已排查动作 #

参考官方示例应用的SAB配置与canvas渲染方案，未定位问题

解决建议 #

1. 验证enforceMultipleVideos配置生效：初始化后调用client.getMediaConfig()，确认返回的配置中enforceMultipleVideos为false，避免参数传递失效
2. 关闭Chrome硬件加速：进入Chrome设置>系统，关闭“使用硬件加速模式（如果可用）”，重启浏览器后测试。部分硬件加速场景下会触发Chrome的视频流订阅限制
3. 检查视频订阅逻辑：调用renderVideo前，通过client.getSubscribedVideoUsers()查看当前已订阅的用户列表，确认是否存在未正确订阅的情况
4. 升级Chrome版本：将Chrome更新至最新稳定版，旧版本可能存在SAB或WebRTC API的兼容性问题
5. 调整patchJsMedia配置：尝试将初始化参数中的patchJsMedia改为false，部分场景下该补丁在Chrome中会干扰多路视频订阅逻辑

内容的提问来源于stack exchange，提问作者Harshit Bhatt