Document Picture-in-Picture API 实战指南：在浏览器中实现浮动聊天窗口

Web API家族新成员：文档画中画API（Document Picture-in-Picture API）

文档画中画API（Document Picture-in-Picture API）是Web API家族中的一项新功能，其原始试用版已随Chrome M111于2023年3月7日发布。虽然目前可能无法覆盖所有浏览器，但它为开发者提供了一些极具实用价值的功能。

什么是画中画（Picture-in-Picture，PiP）？

画中画（PiP）是一项浏览器功能，它允许创建一个浮动窗口，该窗口可以置于其他窗口之上。用户可以自由移动和调整窗口大小，从而在观看视频的同时继续浏览其他页面或应用，实现多任务处理。

在现代浏览器（如Chrome、Firefox和Safari）中，开发者可以通过调用HTMLVideoElement的requestPictureInPicture()方法，将现有的HTMLVideoElement视频流弹出到独立窗口中。

videoElement.requestPictureInPicture();

目前，Chrome、Edge和Safari支持该Web API，但Firefox暂时不支持通过编程方式触发PiP功能。

文档画中画API的突破

传统的画中画功能仅限于视频播放，这在一定程度上限制了其应用场景。而文档画中画API则突破了这一限制，它允许开发者创建一个始终置顶的浮动窗口，并在原页面失活时自动关闭。

以下是一个简单的示例代码，展示如何使用文档画中画API弹出一个窗口：

const pipWindow = await documentPictureInPicture.requestWindow();
pipWindow.document.body.innerHTML = "你好！";

与window.open()方法相比，文档画中画API的显著优势在于无需通过postMessage进行父窗口与弹出窗口之间的通信。开发者可以直接访问JavaScript上下文，并将DOM元素从父窗口移动到弹出窗口中：

// 从父窗口获取元素
const elem = document.getElementById("div#parent");
// 添加到弹出窗口
pipWindow.document.body.appendChild(elem);

当前试用阶段的注意事项

需要注意的是，文档画中画API目前仍处于原始试用阶段。开发者可以通过以下方式启用该功能：

注册试用：https://developer.chrome.com/origintrials/#/view_trial/1885882343961395201
在Chrome中启用实验性标志：chrome://flags/#document-picture-in-picture-api

试用阶段的主要目的是帮助开发者构建演示和原型，同时让Chrome团队了解该API的实际使用场景及其与其他Web技术的交互方式。

实际应用场景：屏幕共享中的聊天窗口

在屏幕共享场景中，用户通常会失去对聊天界面的访问权限，需要频繁切换浏览器标签查看聊天内容。文档画中画API可以解决这一问题，通过弹出一个独立的聊天窗口，使用户在屏幕共享时仍能追踪对话。

以下是实现步骤：

检查文档画中画API是否支持（需要Chrome 111+并启用实验性标志）：

if ('documentPictureInPicture' in window) {
    // 检查用户是否正在屏幕共享
    if (screenShareEnabled) {
        // 确认共享的是标签页而非整个屏幕
        if (screenVideoTrack.__proto__[Symbol.toStringTag] === 'BrowserCaptureMediaStreamTrack') {
            // 弹出聊天窗口
            pipWindow = await window.documentPictureInPicture.requestWindow({
                initialAspectRatio: 1 / 7,
            });
        }
    }
}

在弹出窗口中渲染聊天组件：

import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@dytesdk/ui-kit/loader/index.es2017.js';
defineCustomElements();

const chatElem = document.createElement('dyte-chat');
document.body.appendChild(chatElem);

将主窗口的meeting上下文传递到弹出窗口：

pipWindow.document.querySelector('dyte-chat').meeting = meeting;

通过上述步骤，用户可以在屏幕共享时实时查看聊天内容，而无需频繁切换标签页。

总结

文档画中画API是一项令人兴奋的新功能，它进一步缩小了原生应用与浏览器应用之间的差距。尽管目前仍处于试用阶段，且未来可能会有所调整，但它已经展示了许多传统方式无法实现的应用场景。对于开发者而言，这是一个值得探索和利用的强大工具。

原文链接: https://dyte.io/blog/document-picture-in-picture-api-for-video-calls/