Streaming webcam shows a still frame instead of the camera after a page reload (7.0-dev)

在 7.0-dev 中,使用 gr.Image 开启 streaming=True 并绑定 .stream() 事件时,刷新页面后摄像头区域可能只显示上一段录制的静止帧,而流仍在持续发送。优先排查会话恢复逻辑是否把 /queue/join 提交的摄像头帧当作 Image 的值保存并在刷新后回填。

快速结论:在 7.0-dev 中,使用 gr.Image 开启 streaming=True 并绑定 .stream() 事件时,刷新页面后摄像头区域可能只显示上一段录制的静止帧,而流仍在持续发送。优先排查会话恢复逻辑是否把 /queue/join 提交的摄像头帧当作 Image 的值保存并在刷新后回填。

适用环境:Gradio 7.0-dev(该提交报告版本为 gradio 6.31.0、gradio_client 2.7.2,提交标识 121688c),Linux,Chromium;涉及 gr.Image 的 webcam streaming 与 .stream() 事件。

最快修复方案:暂无确认的一步修复方案。该问题在 Issue 讨论中称已由 #14024 修复并合并进 7.0-dev,将随 Gradio 7 发布,因此可优先尝试升级到包含该修复的 Gradio 7 版本。

注意事项:在未升级到含修复的版本前,刷新同一标签页可能复现;打开新标签页(新会话)据 Issue 描述可正常工作,但是否能作为稳定绕过方式取决于后续版本行为,尚未在本 Issue 中系统验证。

问题场景

用户使用 Gradio 7.0-dev 构建应用:gr.Image(sources=["webcam"], streaming=True) 并通过 cam.stream(on_frame, cam, out) 处理摄像头帧。操作顺序为点击 Record 开始、Stop 结束,然后刷新浏览器标签页再次点击 Record。此时摄像头处于开启状态,分块仍会提交到 /stream/<event_id> 且输出正常返回,但 webcam 区域只显示一张静止帧,而不是实时画面。新开标签页(新会话)正常。

报错原文

Streaming webcam shows a still frame instead of the camera after a page reload (7.0-dev)

原因分析

Issue 作者分析认为,问题来自 #13585 引入的会话恢复(session resume):提交事件时 submit() 会把输入保存到会话存储(session store),对于 .stream() 事件,随 /queue/join 发送的摄像头帧被保存为 Image 的值。页面刷新后该值被恢复,而 Webcam.svelte 在 value 存在时会隐藏 <video> 并显示 <img src={value.url}>,导致画面停留在静止帧。

作者还指出,运行历史(run history)出于同样原因已经会跳过流式输入(#13979),但相邻的会话存储记录没有做同样处理;gr.Audio 麦克风流式输入也会以同样方式保存一个多余的块,只是其流式 UI 忽略该值,所以没有可见变化。main 分支因为没有会话存储,不受影响。上述均为 Issue 中的分析,具体修复实现以 #14024 为准。

环境排查

  • 确认 Gradio 版本是否为 7.0-dev,或是否已包含 #14024 的修复。
  • 确认事件是否通过 .stream() 绑定,且输入组件为开启 streaming=True 的 gr.Image webcam。
  • 确认浏览器是否为 Chromium,以及是否在同一标签页刷新后复现。
  • 如可控,对比同一标签页刷新与新标签页(新会话)的行为差异,以判断是否与会话恢复相关。

解决步骤

  1. 先按 Issue 的复现步骤确认现象:打开应用、允许摄像头、Record、Stop,刷新标签页后再次 Record,观察 webcam 区域是否显示静止帧。
  2. 检查当前 Gradio 版本是否仍为 7.0-dev 且早于 #14024 合并点;若是,可优先尝试升级到包含该修复的 Gradio 7 版本。
  3. 升级后重新执行上述复现流程,确认刷新后摄像头区域恢复实时视频。

验证方法

在同一标签页中完成 Record、Stop、刷新、再次 Record 的操作后,确认 webcam 区域显示的是实时摄像头画面而非静止帧,同时 .stream() 的输出仍能正常返回。

参考来源

gradio-app/gradio #14023

这个方案解决了吗?

celebrityanime
celebrityanime
文章: 31855

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注