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 目前仍处于原始试用阶段，开发者可通过以下方式启用该功能：

1. 注册试用

2. 在 Chrome 中启用实验性标志：

   chrome://flags/#document-picture-in-picture-api

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

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

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

1. 检查文档画中画API是否支持

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

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

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);

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

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

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

六. 总结

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

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