利用 MediaSession API 为画中画窗口添加媒体控制

理解画中画窗口的交互限制

当我们将一个视频元素通过 video.requestPictureInPicture() 方法转换为浮动的画中画（Picture-in-Picture, PiP）窗口时，开发者通常希望能够在该窗口内实现一些交互功能，例如点击按钮。然而，直接通过 PictureInPictureWindow 对象获取鼠标事件（如鼠标位置、点击、按下/抬起）是不可行的。根据目前的浏览器API设计，PictureInPictureWindow 实例主要暴露了 resize 事件，用于监听窗口尺寸的变化，但并不提供通用的DOM事件监听能力。这意味着我们无法像操作常规网页元素那样，直接在PiP窗口中渲染的Canvas内容上监听鼠标事件。

利用 MediaSession API 实现特定交互

尽管无法获取通用的鼠标事件，但对于某些特定场景，尤其是涉及媒体播放或视频会议的应用，浏览器提供了一个专门的API来增强PiP窗口的交互性——MediaSession API。MediaSession API 允许网页向操作系统和浏览器提供关于媒体播放的信息，并注册处理媒体控制的动作。当视频处于PiP模式时，这些注册的媒体控制动作会以浮动按钮的形式出现在PiP窗口的悬停状态下，为用户提供便捷的操作。

MediaSession API 的核心功能

MediaSession API 主要通过 navigator.mediaSession 对象进行操作，它允许我们：

1. 设置媒体元数据： 如标题、艺术家、专辑封面等，这些信息可能会显示在操作系统的媒体控件中。
2. 注册动作处理器： 针对特定的媒体控制动作（如播放/暂停、下一曲、上一曲、静音、挂断等）注册回调函数。

对于画中画窗口的交互需求，我们主要关注第二点：注册动作处理器。

实现媒体控制按钮

以视频会议应用为例，常见的交互需求包括麦克风静音/取消静音、摄像头开启/关闭以及挂断电话。MediaSession API 提供了对应的动作类型来处理这些需求：

Clipfly

一站式AI视频生成和编辑平台，提供多种AI视频处理、AI图像处理工具。

98

查看详情

• togglemicrophone：切换麦克风状态。
• togglecamera：切换摄像头状态。
• hangup：挂断当前通话。

以下是如何使用 MediaSession API 为PiP窗口添加这些控制按钮的示例代码：

// 假设 toggleAudioMuted, toggleVideoMuted, hangup 是你应用中已定义的处理函数
// 这些函数负责实际的麦克风静音、摄像头开关和通话挂断逻辑

/**
 * 切换麦克风静音状态的函数
 */
function toggleAudioMuted() {
    console.log('麦克风状态切换');
    // 实现麦克风静音/取消静音的逻辑
    // 例如：更新UI、发送信令等
    // 假设有一个变量 `isAudioMuted` 跟踪当前状态
    // isAudioMuted = !isAudioMuted;
    // navigator.mediaSession.setMicrophoneActive(!isAudioMuted); // 同步状态
}

/**
 * 切换摄像头状态的函数
 */
function toggleVideoMuted() {
    console.log('摄像头状态切换');
    // 实现摄像头开启/关闭的逻辑
    // 例如：更新UI、发送信令等
    // 假设有一个变量 `isVideoMuted` 跟踪当前状态
    // isVideoMuted = !isVideoMuted;
    // navigator.mediaSession.setCameraActive(!isVideoMuted); // 同步状态
}

/**
 * 挂断通话的函数
 */
function hangup() {
    console.log('挂断通话');
    // 实现通话挂断的逻辑
    // 例如：关闭连接、跳转页面等
}

// 注册 MediaSession 动作处理器
if ('mediaSession' in navigator) {
    navigator.mediaSession.setActionHandler('togglemicrophone', toggleAudioMuted);
    navigator.mediaSession.setActionHandler('togglecamera', toggleVideoMuted);
    navigator.mediaSession.setActionHandler('hangup', hangup);

    console.log('MediaSession 动作处理器已注册。');

    // 可以在这里设置媒体元数据，尽管对于PiP控制不是必需的
    navigator.mediaSession.metadata = new MediaMetadata({
        title: '视频会议',
        artist: '你的应用名称',
        album: '实时通话'
    });

    // 初始同步麦克风和摄像头状态
    // 假设你的应用有初始的静音状态
    // navigator.mediaSession.setMicrophoneActive(true); // 假设初始麦克风是开启的
    // navigator.mediaSession.setCameraActive(true);    // 假设初始摄像头是开启的

} else {
    console.warn('当前浏览器不支持 MediaSession API。');
}

将上述代码添加到你的应用中，当视频进入PiP模式后，用户将鼠标悬停在PiP窗口上时，就会看到麦克风、摄像头和挂断按钮。点击这些按钮将触发你注册的回调函数。

同步状态显示

为了让PiP窗口上的控制按钮能够正确反映当前的麦克风和摄像头状态（例如，静音时按钮显示为静音图标），MediaSession API 还提供了 setMicrophoneActive() 和 setCameraActive() 方法。你可以在应用中麦克风或摄像头状态发生变化时调用这些方法来同步PiP窗口的显示：

// 当麦克风被静音时
// navigator.mediaSession.setMicrophoneActive(false);

// 当麦克风被取消静音时
// navigator.mediaSession.setMicrophoneActive(true);

// 当摄像头被关闭时
// navigator.mediaSession.setCameraActive(false);

// 当摄像头被开启时
// navigator.mediaSession.setCameraActive(true);

注意事项与总结

1. 功能局限性： MediaSession API 提供的交互功能是预设的、针对媒体场景的特定控制，它不能实现任意的鼠标事件监听，例如获取鼠标在Canvas上的精确坐标或实现自定义的拖拽、绘制等操作。
2. 浏览器兼容性： MediaSession API 的支持情况可能因浏览器版本而异。在使用前建议进行兼容性检查（如 if ('mediaSession' in navigator)）。
3. 用户体验： 通过 MediaSession API 添加的控制按钮由浏览器原生渲染，样式和位置是固定的，通常在PiP窗口悬停时显示。这提供了一种标准且一致的用户体验。
4. Canvas内容交互： 如果你的PiP内容是来自Canvas的流，并且你希望在Canvas上实现更复杂的、非媒体控制的交互，目前没有直接的API支持。你可能需要重新评估你的交互需求，或者考虑是否能在主页面上提供这些交互，PiP窗口仅作为内容的展示。

综上所述，虽然无法直接在画中画窗口中获取通用的鼠标事件，但 MediaSession API 为视频会议等媒体应用场景提供了一个强大且标准化的解决方案，可以方便地添加麦克风、摄像头和挂断等核心控制功能，极大地提升了用户在PiP模式下的操作便利性。

以上就是利用 MediaSession API 为画中画窗口添加媒体控制的详细内容，更多请关注php中文网其它相关文章！