内容提要
Jitsi 在 GSoC 2026 中为浏览器会议引入交互式文档画中画(Document PiP),支持独立及 iframe 嵌入会议。Chromium 切换标签页时自动开启,WebKit 使用视频画中画,也可手动开启。界面基于 React createPortal,提供静音、视频开关和退出控件。iframe 受规范限制,通过内部 API 和 RTCPeerConnection 转发视频实现。
延伸解读
浏览器兼容性与自动触发差异
Jitsi 的文档画中画在不同浏览器内核下行为不同。Chromium 浏览器在用户切换标签页时自动打开文档画中画,而 WebKit 浏览器则自动打开视频画中画。用户也可手动开启。Electron 应用保留原有视频画中画行为。这种差异意味着用户体验可能因浏览器而异,开发者和用户需注意自动画中画功能受浏览器权限和资格规则限制。
iframe 嵌入的技术挑战与解决方案
嵌入式会议面临 Document PiP 规范限制:仅允许顶级浏览上下文调用 requestWindow()。Jitsi 通过 iframe API 传输内部请求,由嵌入页面打开并管理 PiP 窗口,并加载专用 React 渲染器。由于跨域无法直接传递 MediaStreamTrack,iframe 通过 RTCPeerConnection 转发选定视频,信令使用内部 API,不引入新公共 API。目前仅转发视频轨道,音频仍从原 iframe 播放。
功能启用与配置要求
要使用浏览器画中画功能,部署需包含合并的更改,并通过配置项 pip.enableBrowserPiP 启用。该功能支持独立会议和 iframe 嵌入会议,提供静音、视频开关和退出会议等控件。用户无需返回主标签页即可控制麦克风和摄像头,保持相关参会者可见。注意,自动画中画在 meet.jit.si 站点应已启用,但其他部署需自行配置。
Q&A
Jitsi 新推出的文档画中画功能是什么?
Jitsi 在 GSoC 2026 中为浏览器会议引入的交互式文档画中画(Document PiP)功能,支持独立会议和通过 Jitsi IFrame API 嵌入的会议。它允许用户在画中画窗口中显示带有会议控件的交互式 React 界面,包括静音/取消静音、启用/禁用视频以及退出会议等控件。
Jitsi 的文档画中画在不同浏览器中如何自动触发?
在基于 Chromium 的浏览器中,当用户切换到另一个标签页时,文档画中画会自动打开;在基于 WebKit 的浏览器中,当焦点离开会议内容时,视频画中画会自动打开。用户也可以使用工具栏按钮手动打开画中画。Electron 应用保留现有的视频画中画行为。
Jitsi 如何实现文档画中画的界面渲染?
在独立会议中,Jitsi 使用 React 的 createPortal 组件将画中画界面渲染到文档画中画窗口中。该界面提供静音/取消静音、启用/禁用视频以及退出会议等控件,这些控件复用了现有的 Jitsi 工具栏组件和 Redux 操作。画中画窗口采用紧凑布局,显示当前正在观看大视频的参与者,当选定的视频静音或不可用时,则显示参与者的头像和显示名称。
嵌入式会议使用文档画中画有哪些限制?
嵌入式会议面临一个额外限制:Document PiP 规范仅允许从顶级浏览上下文中调用 requestWindow() 函数。因此,在 iframe 中运行的会议无法直接打开 Document PiP 窗口。此限制已在 WICG 的一个未解决的问题中进行跟踪。
Jitsi 如何解决 iframe 中无法直接打开文档画中画的问题?
会议 iframe 通过现有的 iframe API 传输发送内部请求。然后,嵌入页面使用每个 API 的控制器打开并管理 Document PiP 窗口,并在其中加载一个专用的 React 渲染器。由于会议 MediaStreamTrack 无法在跨域浏览上下文之间直接传递,因此 iframe 会通过原生 RTCPeerConnection 转发选定的视频。信令使用内部外部 API 传输消息,不会引入新的公共 API。嵌入式媒体桥目前仅传输选定的视频轨道;会议音频继续从原始会议 iframe 播放。
如何启用 Jitsi 的浏览器画中画功能?
当部署包含合并的更改并使用 config pip.enableBrowserPiP 启用浏览器画中画时,该功能即可使用。