Next.js(Vercel)部署后摄像头实时流黑屏，COEP配置仍报错求助

我正在开发一款浏览器端音视频录制回放应用，录制时支持实时推流预览。本地运行完全正常，但用Next.js构建部署到Vercel后，录制阶段实时视频流显示黑屏，但录制完成后音视频能正常查看。

生产环境提示需要设置Cross-Origin-Embedder-Policy以阻止帧被拦截，我已经在next.config.js中配置了COEP（值为require-corp）和COOP（值为same-origin），且确认其他请求已加载这些头信息，但问题仍未解决，求技术建议。

相关代码片段 #

媒体流获取与绑定代码 #

const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });

streamRef.current = stream;

if (videoRef.current) {
    videoRef.current.srcObject = stream;
}

视频元素代码 #

<video
  ref={videoRef}
  autoPlay
  playsInline
  muted
/>

Next.js 响应头配置代码 #

const nextConfig = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Cross-Origin-Opener-Policy",
            value: "same-origin",
          },
          {
            key: "Cross-Origin-Embedder-Policy",
            value: "require-corp",
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

可能的解决方案建议 #

1. 检查COEP/COOP头的覆盖范围

   • Vercel部署时，/_next/路径下的静态资源可能被平台默认头覆盖，建议在next.config.js中单独为这类路径添加相同的COEP/COOP配置，确保所有页面和资源都能正确加载这两个头。
   • 用浏览器开发者工具的网络面板，检查视频预览页面的响应头，确认COEP和COOP是否正确返回，避免出现头被覆盖的情况。

2. 处理媒体流的跨上下文权限

   • 启用COEP/COOP后，浏览器跨上下文隔离更严格，srcObject绑定媒体流可能出现权限问题。尝试给视频元素添加crossOrigin属性：

     <video
       ref={videoRef}
       autoPlay
       playsInline
       muted
       crossOrigin="use-credentials"
     />
     

3. 添加错误监听定位问题

   • 为视频元素和媒体流添加错误监听，捕获生产环境下的具体错误信息：

     if (videoRef.current) {
       videoRef.current.srcObject = stream;
       videoRef.current.addEventListener('error', (e) => {
         console.error('视频元素错误:', e.error);
       });
     }
     stream.addEventListener('inactive', () => {
       console.error('媒体流已失效');
     });
     

   • 通过生产环境控制台日志，定位具体的权限或资源加载错误。

4. 调整COOP/COEP的组合值

   • 当前same-origin的COOP配置可能过于严格，尝试改为same-site配合COEP的require-corp，看看是否能解决跨上下文的媒体流访问问题：

     {
       key: "Cross-Origin-Opener-Policy",
       value: "same-site",
     }
     

5. 验证生产环境构建逻辑

   • 在本地模拟生产环境构建（npm run build && npm start），排查是否是构建阶段的代码优化导致媒体流处理逻辑异常。如果本地生产构建也出现问题，可逐步排查代码压缩、Tree Shaking等配置的影响。

内容的提问来源于stack exchange，提问作者Finn Formica