实时互动网
·
基于 ZEGO SDK 实现 Web 画中画音视频通话功能
💡
原文中文，约5600字，阅读约需14分钟。
📝
内容提要
画中画功能允许用户在浏览网页或使用应用时继续观看视频通话。结合ZEGO Express SDK和Web画中画API，可以实现音视频通话。需确保浏览器支持Document Picture-in-Picture API，并设置窗口内容和样式，添加事件监听以实现控制。
🎯
关键要点
- 画中画功能允许用户在浏览网页或使用应用时继续观看视频通话。
- 结合ZEGO Express SDK和Web画中画API可以实现音视频通话。
- 确保浏览器支持Document Picture-in-Picture API，建议使用Chrome 120或更高版本。
- 在通话页面中开启自动进入画中画模式。
- 判断浏览器是否支持Document Picture-in-Picture API。
- 使用requestWindow方法打开画中画窗口，并设置窗口尺寸。
- 设置画中画窗口的HTML结构和样式。
- 使用ZEGO Express SDK创建流并渲染到画中画窗口。
- 为画中画窗口中的控制按钮添加事件监听。
- 监听画中画窗口关闭事件并进行相应处理。
- 主动关闭画中画窗口的方法。
- 同步主页面与画中画窗口的状态变化。
❓
延伸问答
如何在网页中实现画中画音视频通话功能？
可以通过结合ZEGO Express SDK和Web画中画API实现，确保浏览器支持Document Picture-in-Picture API。
使用画中画功能需要满足哪些条件？
需要确保已实现基本的实时音视频功能，并且浏览器版本为Chrome 120或更高。
如何判断浏览器是否支持画中画功能？
可以通过检查`documentPictureInPicture`是否在`window`对象中来判断。
如何设置画中画窗口的HTML结构和样式？
可以通过操作`pipWin.document`来设置窗口的头部和主体内容，包括样式和结构。
如何在画中画窗口中添加控制按钮的事件监听？
可以为按钮添加点击事件监听器，例如切换麦克风和摄像头的功能。
如何主动关闭画中画窗口？
可以通过调用`pipWin.close()`或`documentPictureInPicture.window.close()`来主动关闭窗口。
➡️
