有了画中画功能的完整文档,视频会议 Web 应用便可将多个视频流合并到单个画中画窗口中,而无需借助画布技巧。用户还可以提供自定义控件,例如发送消息、将其他用户设为静音或举手。
以下代码段展示了如何启用自定义视频播放器的画中画功能。
asyncfunctiontogglePictureInPicture(){// Close Picture-in-Picture window if any.if(documentPictureInPicture.window){documentPictureInPicture.window.close();return;}// Open a Picture-in-Picture window.constpipWindow=awaitdocumentPictureInPicture.requestWindow({initialAspectRatio:640/360,copyStyleSheets:true,});// Move video to the Picture-in-Picture window.constvideo=document.querySelector("#video");pipWindow.document.body.append(video);// Listen for the PiP closing event to move the video back.pipWindow.addEventListener("unload",(event)=>{constvideoContainer=document.querySelector("#videoContainer");constpipVideo=event.target.querySelector("#video");videoContainer.append(pipVideo);});}