Jitsi 已经在 Electron 框架下支持视频画中画功能，当焦点离开会议窗口时，画中画会自动打开。这个GSoC 2026项目的目标是将交互式文档画中画功能引入浏览器会议，包括自动和手动输入。
该方案支持独立会议和通过 Jitsi IFrame API 嵌入的会议。支持文档画中画 (Document PiP) 的浏览器可以显示带有会议控件的交互式 React 界面。如果文档画中画功能不可用，则视频画中画功能在支持该功能的浏览器上仍然可用。
自动画中画功能在不同平台上的行为有所不同。在支持的基于 Chromium 内核的浏览器中，当用户切换到另一个标签页时，文档画中画会自动打开。在基于 WebKit 内核的浏览器中，当焦点离开会议内容时，视频画中画会自动打开。用户也可以使用工具栏按钮手动打开画中画。但是，Electron 应用保留了现有的视频画中画行为。
使用 React createPortal 实现画中画功能
对于基于 Chromium 的浏览器，Jitsi 会注册 MediaSession 的 enterpictureinpicture 操作处理程序。当用户切换到其他会议标签页时，浏览器可以调用此处理程序。此行为仍受浏览器自动画中画权限和资格规则的约束。https: //meet.jit.si/ 站点应启用自动画中画功能。当用户返回会议标签页时，可见性更改监听器会关闭文档画中画窗口。
对于基于 WebKit 内核的浏览器，Jitsi 使用 Video PiP 和视频元素的webkitSetPresentationMode()方法在画中画和内联模式之间切换。此实现灵感来源于AutoPiP Safari 扩展。
在独立会议中，React 的 createPortal 组件会将画中画界面渲染到文档画中画窗口中。该界面目前提供静音/取消静音、启用/禁用视频以及退出会议等控件。这些控件复用了现有的 Jitsi 工具栏组件和 Redux 操作。
画中画窗口采用紧凑布局，显示当前正在观看大视频的参与者。当选定的视频静音或不可用时，则会显示参与者的头像和显示名称。
iframe 约束
嵌入式会议还面临一个额外的限制：Document PiP 规范仅允许从顶级浏览上下文中调用 requestWindow() 函数。因此，在 iframe 中运行的会议无法直接打开 Document PiP 窗口。此限制已在WICG 的一个未解决的问题中进行跟踪。
为了解决这个问题，会议 iframe 通过现有的 iframe API 传输发送内部请求。然后，嵌入页面使用每个 API 的控制器打开并管理 Document PiP 窗口，并在其中加载一个专用的 React 渲染器。
由于会议 MediaStreamTrack 无法在跨域浏览上下文之间直接传递，因此 iframe 会通过原生RTCPeerConnection转发选定的视频。信令使用内部外部 API 传输消息，不会引入新的公共 API。嵌入式媒体桥目前仅传输选定的视频轨道；会议音频继续从原始会议 iframe 播放。
总结
Jitsi Meet 现在支持独立浏览器会议和嵌入式浏览器会议的交互式文档画中画 (Document PiP) 体验，并在支持视频画中画 (Video PiP) 的情况下作为备用方案。用户可以保持相关参会者可见，控制其麦克风和摄像头，并且无需返回主标签页即可离开会议。
当部署包含合并的更改并使用 config pip.enableBrowserPiP 启用浏览器画中画时，该功能即可使用。
原文：https://jitsi.org/blog/introducing-document-pip-for-browser-meetings/
本文来自作者投稿，版权归原作者所有。如需转载，请注明出处：https://www.nxrte.com/jishu/yinshipin/71872.html
